JavaScript动态网页制作.docx

JavaScript动态网页制作.docx

《JavaScript动态网页制作.docx》由会员分享，可在线阅读，更多相关《JavaScript动态网页制作.docx（28页珍藏版）》请在冰豆网上搜索。

JavaScript动态网页制作

JavaScript动态网页制作宝库

∙动态网页制作简介

∙网页中的最后修改日期

∙巧用表单单选框

∙网页电子时钟揭密

∙用Javascript制作跳动的文字

∙Javascript的推出文字效果

∙Javascript的环绕文字效果

∙用Javascript制作鼠标移动跟随

∙Javascript制作水中倒影

∙用Javascript制作推拉门式菜单

∙用Javscript制作图片变换特效

∙用Javascript制作会计算的表单

∙用Javascript制作复选框

∙用Javascript制作旋转导航菜单

动态网页制作简介

　　动态HTML（即DHTML）是近年来网络发展进程中最振奋人心，也最具实用性的创新之一。

国内网络界也掀起了一股学习动态HTML的热潮。

所谓动态网页就是采用动态HTML制作出来的具有动态效果的网页。

　　有人把动态HTML当作一门语言，也有人把它当作一种专门的技术，这些理解都是不对的。

实际上，它是一种通过各种技术的综合发展而得以实现的概念（当然，不同的浏览器，实现的程度也不同），这些技术包括Javascript、VBScript、DocumentObjectModel（文件目标模块）、Layers和CascadingStyleSheets（CSS）等。

　　那么，到底什么是动态HTML呢？

简而言之，动态HTML就是一种即使在网页下载到浏览器以后仍然能够随时变换的HTML。

比如，当鼠标移至文章段落中，段落能够变成蓝色，或者网页头部能够滑过电脑屏幕。

这就是说，HTML中能够做的一切在网页下载后还能够做。

动态HTML的实现手段同样是多种多样的，可以是现有的各种手段的组合。

比较常用的技术有：

　　（l）脚本编程语言（Javascript，VBScript）

（2）文件目标模块（DOM）

　　（3）层叠样式表（CSS）

　　（4）动态图层（layers）

　　NetscapeCommunicator4．0以上版本和MicrosoftInternetExplorer（IE）4．0以上版本，都宣称支持这种最新的动态HTML功能。

但实际上，他们所支持的动态HTML内容并不完全相同。

　　IE4.0所支持的动态HTML包括以下几部分：

（1）层叠样式表（CSS）：

提供了设定HTML标记的所有文本修饰（如文字的大小、字体、颜色等内容）的排版功能。

在网页下载完毕后，可动态地改变页面元素的CSS属性。

（2）动态内容（DynamicContent）：

可以动态地更新网页的内容，即可以动态删除和增加页面中的各种元素，随时适应页面编排的需要。

　　（3）动态图像：

通过内建的Animation可以实现动画的效果，另外配合Javascript、VBScript或ActiVeX控件可以轻松地移动图像。

　　（4）数据库支持：

通过动态HTML方便地实现对数据库中数据的访问。

从而使网页设计者轻松地处理数据，实现更强大的交互功能。

　　Netscape4．0所支持的动态HTML包括以下几部分：

（1）层叠样式表（CSS）。

（2）脚本排版样式（JavascriptStyleSheets）：

简称JSS，这是Netscape公司为该浏览器内建的一种排版样式，可以通过Javascript来控制StyleSheets。

　　（3）动态图层（DynamicLayers）这是一项很强大的功能，可以提供图文定位、移动图文、控制显示或隐藏图片的功能，方便地实现各种特殊效果。

　　我们制作动态网页主要是利用CSS定义的属性可以动态改变、图层可以动态定位和在客户端解释执行的Javascript程序能够实时地操作HTML元素及其属性的特性，才使得网页动起来，与用户的实时交互得以实现。

所以，要掌握动态网页制作技术，除了要熟悉CSS、图层应用技术外，还必须学好Javascript语言，并不要求达到熟练编程的水平，而是要达到基本能看懂程序。

因为制作动态网页大多采用“拿来主义”，把别人的成果拿来后，不要生吞活咽，而是要细嚼慢咽，知其然且知其所以然，大胆地做一些改进试验，这样你的水平就会很快提高。

　　在制作动态网页的过程中，要特别注意两大主流浏览器对动态HTML对持的程度是不同的，要使网页适应不同的浏览器，在程序中的一些具体操作上要分别设计。

如：

IE浏览器不支持Layers，但我们可以用DIV来代替，Dreamweaver3中图层给我们做了很好地示范。

又如：

NS不支持document.all和style则我们就要分别设计。

如此等等，在本专题中将作详细描述。

网页中的最后修改日期

　　利用文档对象的一个属性lastModified就可以显示网页最后日期，这一点对一个网站管理者来说是十分有用的。

可以在网页中加入相应的函数，自动显示文档的最后修改日期。

其实，很多网页都有这段程序，我在这里把这段大家都用的程序作为例子进行剖析，以说明如何对一个Javascript程序举一反三地应用。

　　一、最简单的用法

　　示例：

本页最后更新日期：

01/31/200116:

01:

24

　　这个例子只用了一条语句，请看源代码：

--

document.write（document.lastModified）

//-->

　　这里document.write（document.lastModified）的作用是用document对象的write方法把document对象的lastModified属性值写到文档中。

在《Javascript基础》一文中已讲过，对象是一组含有数据的属性和对属性中数据进行操作的方法。

这里，document是一个对象，它包含了许多类似lastModified这样的属性，也包含了许多类似于write这样的方法，我想你现在应该对什么是对象、什么是对象的属性和方法有所理解了吧？

！

那么怎样知道有那些对象，一个对象又有那些属性和方法呢？

这只有去查看Javascript的教科书了。

　　二、显示我们习惯的日期

　　示例：

更新日期：

2001年1月31日

　　上例的日期表示方法是按西方人的习惯的，而本例这种写法就符合中国人的习惯了。

我们再来看看源代码：

--

varlastdate=newDate（document.lastModified）;

Y=lastdate.getYear（）;

if（Number（Y）<100）Y="20"+Y;

M=Number（lastdate.getMonth（））+1;

D=lastdate.getDate（）;

document.write（"更新日期：

"+Y+"年"+M+"月"+D+"日"）;

-->

　　本程序的思路：

把表示日期的数码从lastModified中分离出来，再加上中文年月日不就行了吗！

　　Javascript的Date类型有相应的方法把日期数码分离出来，所以第一步就声明了一个日期变量“lastdate”，并把document.lastModified作为一日期类型给lastdate赋值。

后面就是用相应的方法获取年月日数字了，最后，再用document的write方法把它写入网页文档。

在这段程序中加了一句：

if（Number（Y）<100）Y="20"+Y;由于比较老一点的机器，年份是用两位数表示，就是所谓的“千年虫”，所以2001年就变成了01年，先把年份由字符变为数值再100比较，若小于100，说明是用两位数表示年份，所以在前面加“20”，若大于100，则是用四位数表示年份，所以就不用改了。

　　获得的月份数为什么要加1呢？

这是因为这里的月份是从0开始的，所以要加1，否则1月就变成0月了。

由于是数字相加，所以要先把月份用Number函数把字符变为数值。

　　三、可控显示修改日期

　　图1未按鼠标时的按钮图

　　图2按下鼠标后的按钮图

　　这个例子中，只有你按下按钮才显示更新日期，而当你鼠标移开按钮时，更新日期又不见了。

先看代码：

按钮代码：

　　程序代码：

--

functionldate（）{

varlastdate=newDate（document.lastModified）;

Y=lastdate.getYear（）;

if（Number（Y）<100）Y="20"+Y;

M=Number（lastdate.getMonth（））+1;

D=lastdate.getDate（）;

document.all["lsdate"].value="更新日期：

"+Y+"年"+M+"月"+D+"日";

}

functionresetvalue（）{

document.all["lsdate"].value="按这里查看最近更新日期";

}

-->

　　按钮代码中加了两个事件，并通过事件调用相应的Javascript函数，以完成相应的功能，另外这里给按钮取了一个名称“lsdate”，以便程序中使用。

对于要在程序中使用的元素，给它取一个合适的名称是一种好习惯，用网页制作工具软件的朋友，当然也可采用软件自动生成的元素名称，但为了便于记忆，还是自己取一个比较好。

程序基本上与例二类似，但已把获得日期的代码定义为一个函数了，你看创建函数就是如此简单。

那对花括号就是圈定函数的范围的。

另外这里也不能再用write方法了，而是直接给按钮的“value”属性赋值，这里的document.all很重要，它的意思是文档的所有元素，也就是说它包含了当前网页的所有元素。

它是以数组的形式保存元素的属性的，所以我们可以用document.all["元素名"].属性名="属性值"来动态改变元素的属性。

用这条语句，可以做出许许多多动态网页效果，如：

动态变换图片、动态改变文本的背景、动态改变网页的背景、动态改变图片的大小、动态改变文字的大小各颜色等等。

你简直可以动态控制所有网页元素。

这是不是一条神通广大的语句，应该说是Javascript神通广大！

巧用表单单选框

　　在网页的表单中使用单选框与用户进行交互是十分常见的方法，若是给每个选项再配一段选项的内容介绍，使用户在选择的时候做到心中有数，不是效果更好吗？

若是每个选项的边上都写上一段说明文字，那就使页面太乱了，使用户不明白你是在作介绍还是在做表单。

我们要做的是这样一种效果，在单选框的边上适当地划一块出来显示选项的介绍，随着用户选择不同的选项动态地更换内容，下面的单选框就具有这种效果，请看效果图。

　　图1

　　图2

　　在上面的表单中用了三个单选框组成一个“景点选择单元”，另用一个单行文本框用来显示景点简介，另外用一个按钮链接到已选择景点的相应网页，用HTML是无法实现这种动态效果的。

用Javascript做起来并不难，所增加的代码也不多。

表单的代码如下：

黄山风景区

黟县古民居

道教圣地齐云山

景点简介

">