1、网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）网页设计与制作任务驱动教程 （第3版）网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）2单元9 制作包含特效的网页【任务9-1】制作包含特效的“云南旅游”网页网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）3网页网页0901.html的最终浏览效果如图的最终浏览效果如图9-6所示。所示。图9-6 网页0901.html的最终浏览效果网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）4【任务描述】【任务9-1-1】实现在网页中显示当前 日期的特效在
2、网页在网页0901.html中文字中文字“云南风光云南风光”的右侧的右侧显示当前日期及星期数，日期格式及顺序如图显示当前日期及星期数，日期格式及顺序如图9-7所示。所示。图9-7 网页中显示当前日期及星期数的格式网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）5【任务实施】切换到【代码】视图，将光标置于切换到【代码】视图，将光标置于“云南云南风光风光”的右侧，光标位置如图的右侧，光标位置如图9-8所示。所示。图9-8 【代码】视图中的光标位置1网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）6在光标位置输入表在光标位置输入表9-1所示的所示的
3、JavaScript代码。代码。表表9-1 9-1 显示当前日期的显示当前日期的JavaScriptJavaScript代码之一代码之一行号行号JavaScript代码代码0102030405060708091011121314151617181920 网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）7【任务描述】【任务9-1-2】实现在不同时间段显示 不同问候语的网页特效应用应用JavaScript的的ifelse if语句，在网页语句，在网页0901.html中当前日期及星期数的右侧根据不同中当前日期及星期数的右侧根据不同时间段（采用时间段（采用24小时制）显示相
4、应的问候语，小时制）显示相应的问候语，具体要求如下具体要求如下：网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）8（1）每天上午）每天上午8点之前（不包含点之前（不包含8点）显示点）显示“早晨好！早晨好！”。（2）每天上午）每天上午12点之前（包含点之前（包含8点但不包含点但不包含12点）显示点）显示“上午好！上午好！”。（3）每天的）每天的12点至点至14点（包含点（包含12点但不包点但不包含含14点）显示点）显示“中午好！中午好！”。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）9（4）每天的）每天的14点至点至17点（包含点（包含14
5、点但不包点但不包含含17点）显示点）显示“下午好！下午好！”。（5）每天的）每天的17点之后（包含点之后（包含17点）显示点）显示“晚上好！晚上好！”。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）10【任务实施】在网页的【代码】视图中，将光标置于显示在网页的【代码】视图中，将光标置于显示当前日期的当前日期的JavaScript代码之后，即在代码之后，即在“”与与“”之间，然后输入表之间，然后输入表9-3所示的所示的JavaScript代码。代码。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）11行号行号JavaScript代码代码010
6、203040506070809101112!-var today,hour ;today=new Date();hour=today.getHours();if (hour 8)document.write( 早晨好早晨好!);else if (hour 12)document.write( 上午好上午好!);else if (hour 14)document.write( 中午好中午好!);else if (hour 表表9-3 9-3 在不同时间段显示不同问候语的在不同时间段显示不同问候语的JavaScriptJavaScript代码代码网页设计与制作任务驱动
7、教程（第网页设计与制作任务驱动教程（第3 3版）版）12【任务描述】【任务9-1-3】实现动态改变网页中文 本字体大小的网页特效动态改变网页中文本字体大小，满足不同动态改变网页中文本字体大小，满足不同浏览者的需求。编写浏览者的需求。编写JavaScript代码，实现动态代码，实现动态改变网页中文本字体大小的功能。改变网页中文本字体大小的功能。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）13【任务实施】1 1编写改变文本字体大小的JavaScriptJavaScript代码在网页的【代码】视图中，将光标置于在网页的【代码】视图中，将光标置于“”之前，然后输入表之前，
8、然后输入表9-5所示的所示的JavaScript代码。代码。行号行号JavaScript代码代码01020304050607表表9-5 9-5 动态改变网页中文本字体大小的动态改变网页中文本字体大小的JavaScriptJavaScript代码代码网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）142 2设置超级链接，调用改变字体大小的函数切换到【设计视图】，在切换到【设计视图】，在“友情链接友情链接”所在的所在的区块，选中文字区块，选中文字“小小”，然后在【属性】面板的，然后在【属性】面板的“链接链接”列表框中输入代码列表框中输入代码“javascript:setF
9、ontSize(12)”，调用改变字体大小，调用改变字体大小的函数。调用函数时传递的参数为的函数。调用函数时传递的参数为“12”，即文本，即文本的字体大小为的字体大小为“12像素像素”。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）15以同样的方法选中文本以同样的方法选中文本“中中”，在，在【属性】面板的【属性】面板的“链接链接”列表框中输入代列表框中输入代码码“javascript:setFontSize(14.9)”；选中；选中文本文本“大大”，在，在“链接链接”列表框中输入代列表框中输入代码码“javascript:setFontSize(16)”。网页设计与
10、制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）16【任务描述】【任务9-1-4】实现关闭网页时自动 弹出对话框的特效当浏览者关闭所浏览的网页时自动弹出当浏览者关闭所浏览的网页时自动弹出一个对话框，给浏览者留下深刻的印象。编一个对话框，给浏览者留下深刻的印象。编写写JavaScript代码，实现关闭网页时自动弹代码，实现关闭网页时自动弹出对话框。出对话框。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）17【任务实施】在网页的【代码】视图中，将光标置在网页的【代码】视图中，将光标置于于“”之前，然后输入表之前，然后输入表9-6所示所示的的JavaScr
11、ipt代码。代码。行号行号JavaScript代码代码010203040506 function openWin(msg)alert(msg);表表9-6 9-6 关闭网页时自动弹出对话框的关闭网页时自动弹出对话框的JavaScriptJavaScript代码代码网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）18在标签在标签“”中输入代码中输入代码“onUnload=openWin(感谢你光临本网站感谢你光临本网站)”，结果如下所示。结果如下所示。当关闭该网页中会弹出如图当关闭该网页中会弹出如图9-10所示的对话框。所示的对话框。图9-10 关闭网页时自动弹出的对话
12、框网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）19【任务描述】【任务9-1-5】实现滚动网页标题栏 文字的特效为了吸引浏览者注意力，经常在网页标题栏为了吸引浏览者注意力，经常在网页标题栏中设置标题文字的滚动效果，以突出网站的主题。中设置标题文字的滚动效果，以突出网站的主题。编写编写JavaScript代码，实现滚动网页标题栏中文代码，实现滚动网页标题栏中文字的功能。字的功能。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）20【任务实施】在网页的【代码】视图中，将光标置于在网页的【代码】视图中，将光标置于“”与与“”之间，然后输入之间，然
13、后输入表表9-7所示的所示的JavaScript代码。代码。表表9-7 9-7 滚动标题栏文字的滚动标题栏文字的JavaScriptJavaScript代码之一代码之一行号行号JavaScript代码代码0102030405060708091011121314 !-var titleWord=品天下美景品天下美景-饱您的眼福饱您的眼福;var speed=300 var titleChange=+titleWord;function titleScroll()if(titleChange.length网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）21在在body标签
14、内已有的代码标签内已有的代码“”中中“body”的后面输入的后面输入“onLoad=titleScroll();”，结果如下所示。结果如下所示。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）22【任务描述】【任务9-1-6】实现鼠标指针指向不同 超级链接切换不同图片的网页特效编写编写JavaScript代码，实现以下功能。代码，实现以下功能。（1）单击网页中不同的文字型超级链接，打）单击网页中不同的文字型超级链接，打开一个独立的窗口显示对应图片。开一个独立的窗口显示对应图片。（2）鼠标指针指向不同的文字型超级链接，）鼠标指针指向不同的文字型超级链接，切换不同的图片。
15、切换不同的图片。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）23【任务实施】1 1编写自动切换图片的JavaScriptJavaScript代码在网页的【代码】视图中，将光标置于在网页的【代码】视图中，将光标置于“”之前，然后输入表之前，然后输入表9-10所示的所示的JavaScript代码。代码。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）24表表9-10 9-10 自动切换图片的自动切换图片的JavaScriptJavaScript代码代码行号行号JavaScript代码代码0102030405060708091011121314
16、1516171819202122网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）252 2添加事件触发执行程序代码在网页的【代码】视图中，将光标置于在网页的【代码】视图中，将光标置于“玉龙玉龙雪山雪山”左侧位置，然后输入代码左侧位置，然后输入代码“onclick=this.blur()onMouseOver=changeView(1)”。在以下各行对应位置输入代码在以下各行对应位置输入代码“onclick=this.blur()onMouseOver=changeView(2)”到到“onclick=this.blur()onMouseOver=changeView(
17、7)”，结果如图结果如图9-11所示。所示。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）26图9-11 设置鼠标指针指向超级链接时动态切换图片的代码网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）27【任务描述】【任务9-1-7】实现转动鼠标滚轮缩放 图片的网页特效将鼠标置于图片上，转动鼠标滚轮时缩放图片，将鼠标置于图片上，转动鼠标滚轮时缩放图片，编写编写JavaScript代码实现此功能。代码实现此功能。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）28【任务实施】1 1编写缩放图片的JavaScriptJa
18、vaScript代码在网页的【代码】视图中，将光标置在网页的【代码】视图中，将光标置于于“”之前，然后输入表之前，然后输入表9-11所示所示的的JavaScript代码。代码。行号行号JavaScript代码代码010203040506070809 function change_imageSize(e,img)var zoom=parseInt(img.style.zoom,10)|100;zoom+=event.wheelDelta/12;if(zoom 0)img.style.zoom=zoom+%;return false;表表9-11 9-11 缩入图片的缩入图片的JavaScriptJavaScript代码代码网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）292 2编写代码调用函数将光标置于标签将光标置于标签“”内，然后输入内，然后输入代码代码“onload=javascript:if(this.width185)this.width=185 onmousewheel=return change_imageSize(event,this)”。输入代码后的结果如图输入代码后的结果如图9-12所示：所示：图9-12 【代码】视图中输入转动鼠标滚轮缩放图片的代码网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）
