资源描述
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做起来并不难，所增加的代码也不多。
表单的代码如下：
黄山风景区
黟县古民居
道教圣地齐云山
景点简介
">
这个表单的代码与普通表单稍有差别：
1、三个单选框的value参数值都是一个网页的地址，这是为了按下“显示相应网页”能实现显示相应网页的效果而设置的；
2、单选框都加了一个onclick事件来调用“showjj”函数来实现在文本框中显示相应的景点简介效果；
3、在按钮中加了一个onclick事件来调用showpage函数以实现按下按钮后能显示已选择的景点对应的网页。
那么这两个函数是如何实现这种效果的呢？
请看下面的程序代码，为了你看起来方便，把程序的解释写在相应代码的边上：
--
functionshowpage（）{//显示相应网页的函数，供按钮调用
varpaageurl;//声明一个存放相应网页地址的变量
for（i=0;i{
if（document.jdxzform.item[i].checked）//如果该单选框的checked为真，也就是被选中
pageurl=document.jdxzform.item[i].value;//那么把该单选框中value参数值（即相应的网页地址）赋给pageurl变量。
}
location.href=pageurl;//把pageurl的值（即相应网页的地址）赋给locqtion.href，以显示已被选择的景点对应的网页。
}//显示相应网页的函数结束。
functionshowjj（n）{//显示被选单选框对应景点的简介，这是一个带参数的函数，其参数就是单选框的顺序号。
varjj//声明一个存放相应景点简介信息的变量
switch（n）{//switch语句开始，它的作用是可以根据条件值的不同，选择执行不同的语句，与if语句类似，在这里就是根据单选框顺序号不同，选择不同的景点简介。
case1:
jj="薄海内外，无如徽之黄山，登黄山，天下无山，观止矣";break;//这里的break语句是不参省的，在这里的作用是当条件满足，就跳出switch语句段。
若在switch语句不用break的话，你得到的永远都是最后那一条语句的结果。
case2:
jj="黟县小桃园，烟霞百里间，地多灵草木，人尚古衣冠";break;
case3:
jj="天下无双胜境，江南第一名山——清乾隆";
}
document.all["jdjj"].value=jj;//把景点简介内容赋给“jdjj”的value参数，由于“jdjj”就是那个单行文本框的名称，因此也就是改变了文本框中显示的景点简介内容，从而达到了动态显示相应景点简介的目的。
}
-->
本文例子的制方法如下：
1、按文中介绍的方法做好表单；
2、把Javascript程序复制在网页源代码的
与之间就一切OK了。
若你所需要的单选框数不是三个，只要在switch语句多加几个"case"就行了，其它无需改动，上面程序代码中双斜杠（//）后是注释，不是程序所必须的，实际应用时可删去。
再次提醒一下，程序中要用到的网页元素名称（如本例中的“jdxzform”、“jdjj”等）大小写一定要一致，这是初学者最易犯的错误。
网页电子时钟揭密
在网页做一个小小电子时钟，给你的网页增加一点新意。
本文介绍的电子时钟是可由用户控制的，若你喜欢它，就把它打开，若不喜欢它，可随时将它关闭。
你可试试下面的例子。
图1显示时间
图2关闭时间显示
实际上，这种动态效果，用Javascript来做，也用不了几行代码。
编程思路：
用一个时间函数不断地刷新单行文本框中的时间。
然后用一个单选框来调用显示时间的程序，再用一个单选框来取消时间函数。
我们知道Javascript的Date对象中不仅可获得当前日期。
而且可以获得当前时间，关键的问题是如何把表示时间的数值分离出来，方法有多种，下面分别介绍。
方法一：
这种方法比较传统，但程序比较繁（不推荐）。
程序代码如下：
--
functionshowtime（）{
now=newDate（）;//获取当前日期和时间，并赋给now；
H=now.getHours（）;//从now对象中分离出小时数；
M=now.getMinutes（）;//从now对象中分离出分钟数；
S=now.getSeconds（）;//从now对象中分离出秒数。
timestr=（H<10）?
（"0"+H）:
H;//如果小时数小于10，就给它加一个“0”，使其保持两位数。
timestr+=":
";//小时数后面加一个两点（“：
”）的符号。
timestr+=（M<10>）?
（"0"+M）:
M;//如果分钟数小于10，就给它加一个“0”，使其保持两位数。
timestr+=":
";//分钟数后面加一个两点（“：
”）的符号。
timestr+="（S<10）?
（"0"+S）:
S;//如果秒数小于10，就给它加一个“0”，使其保持两位数。
document.all["witch"].value=timestr;//把当前时间字符串赋给文本框（“witch”）的value属性，从而在文本框中显示当前时间。
ctroltime=setTimeout（"showtime"）,500）;//设置一个定时函数，使得每0.5秒刷新一次文本框中显示的当前时间，从而达到电子时钟每秒跳一下的效果。
}
functionclosetime（）{
clearTimeout（ctroltime）//取消定时函数，也就停止刷新文本框中的时间值，达到关闭时钟的效果。
}
-->
在这段程序中，timestr=（H<10）?
（"0"+H）:
H;语句是if语句的缩写形式，它与if（H<10）timestr="0"+Helsetimestr=H;语句的作用完全相同。
另外“+=”运算符的作用是：
把两个操作数相加再把结果赋给左操作数，如：
timestr+=":
";与“timestr=timestr+":
"”语句完全等效。
方法二、这种方法比上面的方法简单多了。
程序代码如下：
--
functionshowtime（）{
vari=0;//声明一个变量，用于放置的值
now=newDate（）;//获取当前日期和时间
timestr=now.toLocaleString（）;//把当前时间转换成字符形式
i=timestr.indexOf（":
"）;//找出“：
”的位置。
nowtime=timestr.substring（i-2,i+6）//把“：
”所在位置的前两位到“：
”位置后6位的所有字符取出来，实际上是把表示时间的字符串取出来。
document.all["witch"].value=nowtime;//此后的语句与方法一相同，不另解释。
ctroltime=setTimeout（"showtime（）",500）;
}
functionclosetime（）{
clearTimeout（ctroltime）
}
-->
在这段程序中，使用日期对象的toLocaleString（）方法，把日期转换在字符串形式，便于后面的操作；字符串对象的indexOf（）方法的作用是找出给定字符在当前字符串的位置；字符串对象的substring（pos1,pos2）方法的作用是取得字符串的子串，pos1和pos2分别是子中的起始位置和结束位置。
方法三、这种方法所用代码最少，程序代码如下：
--
functionshowtime（）{
now=newDate（）;
timestr=now.toLocaleString（）;
document.all["witch"].value=timestr.split（""）[3];
ctroltime=setTimeout（"showtime（）",500）;
}
functionclosetime（）{
clearTimeout（ctroltime）
}
-->
本方法的巧妙之处是采用了字符对象的分割字符串方法（split（）），它的用法格式为：
string1.split（string2）
其作用是：
将字符串string1按照string2进行分割，返回一个数组，分割后的内容按顺序放在数组中。
在本方法中，就是把日期字符串按空格（""）分割，这样分割后，时间字符串正好在数组的第四个下标变量中。
由于该数组是从0开始起算的，所以把timestr.split（""）[3];赋给文本框的value参数，若你感到这讲得太专业了，你直接把程序复制就行了。
表单的代码如下：
显示时间
关闭时间显示
本文电子时钟的制作方法：
1、用表单按文中介绍的方法制作一个时钟样式，发挥你的创意，把它做得漂亮一点，如可加上背景图片；
2、把程序复制在网页源代码的
与之间，大功告成。
本文列举三种方法的目的是想说明，实现同样的效果，方法是多样的，一种好的方法，将大减少代码的数量，是省时省力的好事，所以我们要灵活应用我们所掌握的知识。
用Javascript制作跳动的文字
一段文字，每个字都在不停地变换着颜色，不停地改变大小且不停地变换位置，像一个个活泼可爱的小精灵。
若是在网页上放上具有这种效果的一段文字，会使整个页面充满生气。
当然，用动画做这种效果是不成问题的，但用Javascript来做要瘦小的多。
下图是抓取的跳动文字瞬间图：
图1
制作方法：
1、先插入一个1*n表格，这里的n就是要跳动的文字数，把表格的高度定义为70px，实际上表格高度的设定原则是要大于最大的跳动文字。
否则在文字跳动时，整个页面都在抖动。
升级会员 