石家庄工程技术学校贾志华《网页设计培训javascript部分》.docx

1、石家庄工程技术学校贾志华网页设计培训javascript部分 第1章 制作日期和排行榜显示特效任务1：第一个嵌入JavaScript脚本的网页1、打开素材页面，并切换到代码视图：（1）使用DW打开“课堂演示示例第一个嵌入JavaScript脚本的网页素材素材.htm”页面。（2）切换到【代码视图】。2、向页面添加JavaScript脚本：（1）在下方，编写脚本。（2）DW中用不同颜色显示，JavaScript脚本代码。alert(你还记得李白的静夜思吗？);/向页面弹出信息提示框document.write(这是我的第一个JAVASCRIPT脚本页面);/用于向页面打印信息document.w

2、rite();任务2：显示日期1、打开素材页面，并切换到代码视图：（1）使用DW打开“课堂演示示例显示日期素材素材.htm”页面。（2）切换到【代码视图】。2、添加标签对：（1）在下方，添加标签对，脚本代码如下：3、添加创建日期对象的脚本（1）创建一个不带参数的Date日期对象，默认包含系统的当期日期和时间，代码如下：var time = new Date(); /获得当前时间4、添加脚本，获取当前日期的年、月、日（1）Date对象分别提供了获取年、月、日的方法。getFullYear：返回Date对象的年份，一个四位的整数。getMonth：返回Date对象的月份，介于011。getDate

3、：返回Date对象的日，介于131。（2）分别声明变量year、month、date用于接收从Date对象中获取的年、月、日，脚本代码如下：var year = time.getFullYear(); var month = time.getMonth()+1; var date = time.getDate();5、添加脚本，拼接字符串输出显示，代码如下：document.write(今天是:+year+年+month+月+date+日);/向页面打印结果6、完整代码如下： var time = new Date(); /获得当前时间/获得年、月、日，Date对象返回月份是从0-11之间 v

4、ar year = time.getFullYear(); var month = time.getMonth()+1; var date = time.getDate(); document.write(今天是:+year+年+month+月+date+日);/向页面打印结果任务3：显示时间1、打开素材页面，并切换到代码视图：（1）使用DW打开“课堂演示示例显示时间素材素材.htm”页面。（2）在【设计视图】模式下，选中页面中文字“时间问候语的显示位置”。（3）切换到【代码视图】。2、添加脚本，创建Date日期对象，获得Date对象的小时数：（1）删除步骤1中选中的页面中的文字，嵌入Java

5、Script脚本标签。（2）创建Date对象。（3）获取Date对象中的小时数。代码如下： var time = new Date( ); /获得当前时间 var hour = time.getHours(); /获得具体的小时 document.write(欢迎您光临中远集团 ) document.write(现在时间是:+hour+点t); 3、添加脚本，通过if-else if语句判断当前时间所处的时段（1）在2操作步骤中已经获取了Date对象的小时数，接下来将以12点和18点为条件，使用if-else语句判断当前时间是上午、下午还是晚上，代码如下： if (hour12) /按12小时

6、制显示 document.write(上午好！); else if(hour18) document.write(下午好！); else document.write(晚上好！);任务4：显示星期几1、打开素材页面，并切换到代码视图：（1）使用DW打开“课堂演示示例显示星期几素材素材.htm”页面。（2）在【设计视图】模式下，选中页面中文字“星期几的显示位置”。（3）切换到【代码视图】。2、添加JavaScript脚本，创建Date对象并从中获取第几天：（1）删除步骤1中选中的页面中的文字，嵌入JavaScript脚本标签。（2）创建Date对象：new Date( )，表示当前日期。（3）使

7、用getDay( )获取星期几，代码如下：var time = new Date( ); /获得当前时间var day = time.getDay();/获得一个星期中的第几天,西方的星期是从星期日开始，星期六结束3、使用switch-case语句转换显示内容，脚本代码：（1）设置switch条件语句的case条件，并通过document.write()输出语句，将结果输出到页面，脚本代码如下：switch(day) case 0: document.write(今天是星期日，不知道今天有没有火箭的比赛); break; case 1: document.write(今天是星期一，不能睡懒觉了

8、好辛苦呀); break; case 2: document.write(今天是星期二，电影票半价，看看有什么好看的大片); break; case 3: document.write(今天是星期三，一周已经过一半了，有盼头了); break; case 4: document.write(今天是星期四，坚持就是胜利); break; case 5: document.write(今天是星期五，我要站好最后一班岗); break; case 6: document.write(今天是星期六，我要去K歌，我要去SHOPPING，今天是属于我的); break;任务5：使用for循环语句输出投票排

9、名1、打开素材页面，并切换到代码视图：（1）使用DW打开“课堂演示示例使用for循环语句输出投票排名素材素材.htm”页面。（2）在【设计视图】模式下，选中页面中文字“投票排名的显示位置”。（3）切换到【代码视图】。2、添加JavaScript脚本，使用for循环语句打印排名：（1）删除步骤1中选中之间的文字，嵌入JavaScript脚本标签。（2）总共四名球员，所以设定循环次数为4次。（3）每次循环将排行条长度增加20，然后用document.write()语句输出，代码如下：for (var i= 0; i 4; i+)document.write(+(80+i*20)+票);上机实练部分

10、实训1：随机显示图片广告1、打开素材页面，并切换到代码视图：（1）使用DW打开“上机实练案例随机显示图片广告素材素材.htm”页面。（2）在【设计视图】模式下，选中页面中文字“广告图片的显示位置”。（3）切换到【代码视图】。2、页面嵌入JavaScript脚本，创建Date对象，并获取秒数：（1）删除步骤1中选中的之间的文字，嵌入JavaScript脚本标签。（2）创建一个包含了当前系统日期时间的Date对象。（3）获取Date对象中的秒数。代码如下： var time=new Date(); var seconds=time.getSeconds();3、以12秒为周期，通过if条件语句判断

11、输出图片的条件（1）设置一个图片变量用来存放不同时间段显示的图片名，初始存放图片为pic1.jpg。（2）根据获得的秒数判断显示哪张图片。（3）使用document.write()向页面输出结果，代码如下：var thisimg=pic1.jpg; if(seconds12)thisimg=pic5.jpg; if(seconds24)thisimg=pic4.jpg; if(seconds36)thisimg=pic3.jpg; if(seconds48)thisimg=pic2.jpg;document.write();实训2：评比星级商铺1、打开素材页面，并切换到代码视图：（1）使用DW

12、打开“上机实练案例评比星级商铺素材素材.htm”页面。（2）在【设计视图】模式下，选中页面中文字“星级显示位置。（3）切换到【代码视图】。2、页面嵌入JavaScript脚本：（1）删除步骤1中选中的之间的文本，嵌入JavaScript脚本标签。（2）假定商家星级为4，设定for循环语句的循环次数为4次。（3）使用document.write()向页面输出结果。代码如下： for(var i=0;i4;i+) document.write(); 实训3：计算年龄1、打开素材页面，并切换到代码视图：（1）使用DW打开“上机实练案例计算年龄素材素材.htm”页面。（2）在【设计视图】模式下，选中页

13、面中文字“年龄显示的位置”。（3）切换到【代码视图】。2、页面嵌入JavaScript脚本，创建Date对象：（1）删除步骤1中选中的文本，嵌入JavaScript脚本标签。（2）创建两个Date对象，一个存储的是当前的日期时间，一个存储的是设定的出生日期，代码如下： var birDay=new Date(1978,11,01); var time=new Date(); 3、计算年龄：（1）使用Date对象的getFullYear()分别获得当前年份和生日所在年份。（2）二者相减得到年龄，代码如下：var age=time.getFullYear()-birDay.getFullYear(

14、);document.write(age);实训4：北京奥运会倒计时1、打开素材页面，并切换到代码视图：（1）使用DW打开“上机实练案例计算年龄北京奥运会倒计时素材.htm”页面。（2）在【设计视图】模式下，选中页面中文字“?”。（3）切换到【代码视图】。2、页面嵌入JavaScript脚本，创建Date对象：（1）删除步骤1中选页面中的“?”，嵌入JavaScript脚本标签。（2）创建两个Date对象，一个存储当前日期，一个存储的是2008年8月8日奥运会开幕式的日期，代码如下： 3、通过Date对象的getTime()方法获得两个Date对象时间的毫秒数之差：var remain=fin

15、alDay.getTime()-today.getTime();4、将毫秒差换算成天数（1）毫秒换成天数=24小时*60分钟*60秒*1000毫秒。（2）使用Math内置对象的ceil()方法取得一个以整数表示的间隔天数。（3）使用document.write()输出语句将计算的结果输出。代码如下：var oneDay=24*60*60*1000; var days=remain/oneDay; var daysold=Math.ceil(days); /ceil( )可以返回一个大于或等于的最小整数 document.write(+daysold+); 第2章 制作鼠标改变背景的特效任务1：

16、随鼠标变化的文字背景1、打开素材页面，并切换到代码视图：（1）使用DW打开“课堂演示示例随鼠标变换的文字背景素材素材.htm”页面。（2）在【设计视图】模式下，选中文本“欢迎来到腾讯客服中心”。（3）切换到【代码视图】。2、向页面添加鼠标移入事件：（1）将光标定位到标签中末尾处，按下空格，自动弹出操作列表，选择“onMouseOver”。3、在鼠标移入事件中添加修改文本背景颜色的代码：onMouseOver=this.style.backgroundColor=#FFFF00 4、在鼠标移出事件中添加修改文本背景颜色的代码：onMouseOut=this.style.backgroundCol

17、or=任务2：随鼠标变化的边框颜色1、打开素材页面，并切换到代码视图：（1）使用DW打开“课堂演示示例随鼠标变换的边框颜色素材素材.htm”页面。（2）在【设计视图】模式下，选中用户名文本框。（3）切换到【代码视图】。2、添加鼠标事件：（1）将光标定位到添加文本框的标签末尾，按下空格，自动弹出操作列表，选择“onMouseOver”和“onMouseOut”。3、在鼠标事件中添加改变和恢复边框颜色的代码：onMouseOver=this.style.borderColor=blue onMouseOut=this.style.borderColor=#9DF986任务3：随鼠标变化的图片1、打

18、开素材页面，并切换到代码视图：（1）使用DW打开“课堂演示示例随鼠标变换的图片素材素材.htm”页面。（2）在【设计视图】模式下，选中页面中的广告。（3）切换到【代码视图】。2、添加鼠标事件，并在鼠标事件中添加改变图片路径的脚本：（1）将光标定位到图像的标签末尾，自动弹出操作列表，选择“onMouseOver”和“onMouseOut”。（2）在鼠标移入事件中添加修改图片路径的代码：onMouseOver=this.src=images/p2.jpg（3）在鼠标移出事件中恢复最初的图片显示：onMouseOut=this.src=images/p1.jpg任务4：同时变化的文字大小和颜色1、打

19、开素材页面，添加JavaScript标签：（1）使用DW打开“课堂演示示例随鼠标同时变化的文字大小和颜色素材素材.htm”页面。（2）切换到【代码视图】。（3）在“忘记代码”超链接标签中定义name属性为“pwd”。2、定义鼠标移入事件调用的函数：（1）在页面中添加JavaScript标签。（2）在标签内定义函数mouseIn()，这个函数是在鼠标移入事件中调用，实现文字大小和颜色的改变，代码如下：function mouseIn() （3）在函数内编写脚本代码：改变文字颜色的脚本代码：pwd.style.color=red;改变文字大小的脚本代码：pwd.style.fontSize=26p

20、x;mouseIn()函数完整代码如下：function mouseIn() pwd.style.fontSize=26px; pwd.style.color=red;4、参照函数mouseIn()的实现，定义鼠标移出时调用的函数。（1）定义函数mouseOut()，在鼠标移出时调用，代码如下：function mouseOut() pwd.style.fontSize=12px; pwd.style.color=blue;5、添加超链接中的鼠标事件，调用已定义的函数。（1）在“忘记代码”的超链接标签中添加鼠标移入事件onMouseOver和鼠标移出事件onMouseOut，分别在事件中年调用

21、已经定义好的mouseIn()函数和mouseOut()函数。onMouseOver=mouseIn() onMouseOut=mouseOut()任务5：使用有参函数修改演示案例41、页面准备：（1）使用DW打开“理论演示示例使用有参函数修改演示案例4素材素材.htm”页面。（2）切换到【代码视图】，在页面中添加JavaScript脚本标记。（3）给“忘记代码”超链接制定name属性为“pwd”。2、定义函数： （1）在标签内定义函数mouseChange(color,size)，第一个参数color用于改变文字的颜色，第二个参数size用于改变文字的大小，代码如下：function mou

22、seChange(color,size)3、脚本代码实现：（1）改变文字颜色的脚本代码：pwd.style.color=color;（2）改变文字大小的脚本代码：pwd.style.fontSize=size;（3）mouseChange(color,size)函数完整代码如下：function mouseChange(color,size) pwd.style.color=color; pwd.style.fontSize=size;4、添加鼠标事件调用函数。（1）在“忘记代码”的超链接标签中添加鼠标事件，并调用函数。onMouseOver=mouseChange(red,26px) onM

23、ouseOut=mouseChange(blue,12px)5、保存页面，按下F12键，查看结果。任务6：使用无参函数改变页面背景颜色1、函数定义：（1）添加脚本标签。（2）定义函数。定义函数changeBTN1()，在函数体内编写脚本：document.bgColor=blue;定义函数changeBTN2()，在函数体内编写脚本：document.bgColor=red;定义函数changeBTN3()，在函数体内编写脚本：document.bgColor=green;完整代码如下：function changeBTN1() document.bgColor=blue;function c

24、hangeBTN2() document.bgColor= red ;function changeBTN3() document.bgColor= green ;2、添加按钮的单击事件，调用函数： （1）分别添加三个按钮的单击事件，然后在事件中调用相应的函数，代码如下：onClick= changeBTN1()onClick= changeBTN2()onClick= changeBTN3()任务7：使用有参函数修改演示案例61、页面添加脚本语言，定义函数：（1）添加脚本标签。（2）定义一个函数change(color)，在函数体内编写代码：document.bgColor=color;2、

25、添加按钮的单击事件并调用函数： （1）分别添加三个按钮的单击事件，在事件中调用函数，并同时传递需要改变的背景颜色值，代码如下：onClick=change(blue)onClick=change(red)onClick=change(green)3、保存页面，按下F12键，查看结果。上机实练部分实训1：改变文字背景颜色一、技能要点（1）会使用鼠标移入事件onMouseOver。（2）会使用鼠标移出事件onMouseOut。（2）会使用样式属性backgroundColor。二、操作步骤1、打开素材页面：（1）使用DW打开“上机案例改变文字背景颜色素材素材.htm”页面。（2）在【设计视图】模式

26、下，选中文本“五福临门2008年北京奥运会吉祥物”。（3）切换到【代码视图】。2、添加鼠标事件：（1）在标签内添加鼠标移入事件onMouseOver和鼠标移出事件onMouseOut。3、在鼠标事件中添加改变背景色代码：onMouseOver=this.style.background=#FFAD5B onMouseOut=this.style.backgroundColor=实训2：改变多个样式（文字大小，文字颜色，边框颜色）1、打开素材页面：（1）使用DW打开“上机案例改变多个样式（文字大小，文字颜色，边框颜色）素材素材.htm”页面。（2）在【设计视图】模式下，选中“QQ号码”文本框。（3）切换到【代码视图】。2、添加鼠标事件：（1）在文本框代码中“onMouseOver”和“onMouseOut”事件。3、在鼠标事件中改变边框颜色的代码：onMouseOver=this.style.borderColor=#F1520E onMouseOut=this.style.borderColor=#7DBEFF4、修改文字颜色：（1）在“忘记QQ号码”所在的超链接中，添加鼠标事件。（2）在鼠标事件中改变文字颜色的代码：onM