JavaScript动态网页制作Word下载.docx

JavaScript动态网页制作Word下载.docx

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

（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

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

<

scriptlanguage="

Javascript"

>

!

--

document.write（document.lastModified）

//-->

/script>

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

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

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

！

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

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

　　二、显示我们习惯的日期

更新日期：

2001年1月31日

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

我们再来看看源代码：

scriptlanguae="

JavaScript"

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）<

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

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

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

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

　　三、可控显示修改日期

　　图1未按鼠标时的按钮图

　　图2按下鼠标后的按钮图

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

先看代码：

按钮代码：

inputtype="

button"

name="

lsdate"

value="

按这里查看最近更新日期"

onclick="

ldate（）"

onmouseout="

resetvalue（）"

　　程序代码：

functionldate（）{

document.all["

].value="

;

}

functionresetvalue（）{

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

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

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

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

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

它是以数组的形式保存元素的属性的，所以我们可以用document.all["

元素名"

].属性名="

属性值"

来动态改变元素的属性。

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

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

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

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

巧用表单单选框

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

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

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

　　图1

　　图2

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

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

表单的代码如下：

formname="

jdxzform"

method="

post"

>

p>

radio"

radiobutton"

hsfg/hsfg.htm"

checkedonclick="

showjj

（1）"

黄山风景区<

/p>

hsfg/gmj.htm"

showjj

（2）"

黟县古民居<

hsfg/qys.htm"

onClick="

showjj（3）"

道教圣地齐云山<

divalign="

center"

景点简介

text"

jdjj"

size="

50"

点击景点单选框，在此显示相应景点的简介。

/div>

Button"

显示相应的网页"

showpage（）"

/form>

　　这个表单的代码与普通表单稍有差别：

　　1、三个单选框的value参数值都是一个网页的地址，这是为了按下“显示相应网页”能实现显示相应网页的效果而设置的；

　　2、单选框都加了一个onclick事件来调用“showjj”函数来实现在文本框中显示相应的景点简介效果；

　　3、在按钮中加了一个onclick事件来调用showpage函数以实现按下按钮后能显示已选择的景点对应的网页。

那么这两个函数是如何实现这种效果的呢？

请看下面的程序代码，为了你看起来方便，把程序的解释写在相应代码的边上：

functionshowpage（）{//显示相应网页的函数，供按钮调用

varpaageurl;

//声明一个存放相应网页地址的变量

for（i=0;

i<

document.jdxzform.item.length;

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:

黟县小桃园，烟霞百里间，地多灵草木，人尚古衣冠"

case3:

天下无双胜境，江南第一名山——清乾隆"

].value=jj;

//把景点简介内容赋给“jdjj”的value参数，由于“jdjj”就是那个单行文本框的名称，因此也就是改变了文本框中显示的景点简介内容，从而达到了动态显示相应景点简介的目的。

}

　　本文例子的制方法如下：

　　1、按文中介绍的方法做好表单；

　　2、把Javascript程序复制在网页源代码的<

head>

与<

/head>

之间就一切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>

）?

+M）:

M;

//如果分钟数小于10，就给它加一个“0”，使其保持两位数。

//分钟数后面加一个两点（“：

（S<

+S）:

S;

//如果秒数小于10，就给它加一个“0”，使其保持两位数。

witch"

].value=timestr;

//把当前时间字符串赋给文本框（“witch”）的value属性，从而在文本框中显示当前时间。

ctroltime=setTimeout（"

showtime"

）,500）;

//设置一个定时函数，使得每0.5秒刷新一次文本框中显示的当前时间，从而达到电子时钟每秒跳一下的效果。

functionclosetime（）{

clearTimeout（ctroltime）//取消定时函数，也就停止刷新文本框中的时间值，达到关闭时钟的效果。

　　在这段程序中，timestr=（H<

语句是if语句的缩写形式，它与if（H<

10）timestr="

+Helsetimestr=H;

语句的作用完全相同。

另外“+=”运算符的作用是：

把两个操作数相加再把结果赋给左操作数，如：

与“timestr=timestr+"

”语句完全等效。

　　方法二、这种方法比上面的方法简单多了。

vari=0;

//声明一个变量，用于放置的值

//获取当前日期和时间

timestr=now.toLocaleString（）;

//把当前时间转换成字符形式

i=timestr.indexOf（"

//找出“：

”的位置。

nowtime=timestr.substring（i-2,i+6）//把“：

”所在位置的前两位到“：

”位置后6位的所有字符取出来，实际上是把表示时间的字符串取出来。

].value=nowtime;

//此后的语句与方法一相同，不另解释。

showtime（）"

500）;

clearTimeout（ctroltime）

　　在这段程序中，使用日期对象的toLocaleString（）方法，把日期转换在字符串形式，便于后面的操作；

字符串对象的indexOf（）方法的作用是找出给定字符在当前字符串的位置；

字符串对象的substring（pos1,pos2）方法的作用是取得字符串的子串，pos1和pos2分别是子中的起始位置和结束位置。

　　方法三、这种方法所用代码最少，程序代码如下：

].value=timestr.split（"

"

）[3];

　　本方法的巧妙之处是采用了字符对象的分割字符串方法（split（）），它的用法格式为：

string1.split（string2）

　　其作用是：

将字符串string1按照string2进行分割，返回一个数组，分割后的内容按顺序放在数组中。

在本方法中，就是把日期字符串按空格（"

）分割，这样分割后，时间字符串正好在数组的第四个下标变量中。

由于该数组是从0开始起算的，所以把timestr.split（"

赋给文本框的value参数，若你感到这讲得太专业了，你直接把程序复制就行了。

　　表单的代码如下：

8"

电子表"

显示时间

closetime（）"

关闭时间显示

　　本文电子时钟的制作方法：

　　1、用表单按文中介绍的方法制作一个时钟样式，发挥你的创意，把它做得漂亮一点，如可加上背景图片；

　　2、把程序复制在网页源代码的<

之间，大功告成。

　　本文列举三种方法的目的是想说明，实现同样的效果，方法是多样的，一种好的方法，将大减少代码的数量，是省时省力的好事，所以我们要灵活应用我们所掌握的知识。

用Javascript制作跳动的文字

　　一段文字，每个字都在不停地变换着颜色，不停地改变大小且不停地变换位置，像一个个活泼可爱的小精灵。

若是在网页上放上具有这种效果的一段文字，会使整个页面充满生气。

当然，用动画做这种效果是不成问题的，但用Javascript来做要瘦小的多。

下图是抓取的跳动文字瞬间图：

　　制作方法：

　　1、先插入一个1*n表格，这里的n就是要跳动的文字数，把表格的高度定义为70px，实际上表格高度的设定原则是要大于最大的跳动文字。

否则在文字跳动时，整个页面都在抖动。