单元9 制作包含特效的网页
【引导训练】
【任务9-1】制作包含特效的“云南旅游”网页
网页0901.html的最终浏览效果如图9-6所示。
图9-6 网页0901.html的最终浏览效果【任务9-1-1】实现在网页中显示当前日期的特效
【任务描述】
在网页0901.html中文字“云南风光”的右侧显示当前日期及星期数，日期格式及顺序如图9-7所示。
图9-7 网页中显示当前日期及星期数的格式
【任务实施】
切换到【代码】视图，将光标置于“云南风光”的右侧，光标位置如图9-8所示。
图9-8 【代码】视图中的光标位置1
在光标位置输入表9-1所示的JavaScript代码。
表9-1 显示当前日期的JavaScript代码之一
【任务9-1-2】实现在不同时间段显示不同问候语的网页特效
【任务描述】
应用JavaScript的if…else if语句，在网页0901.html中当前日期及星期数的右侧根据不同时间段（采用24小时制）显示相应的问候语，具体要求如下：
（1）每天上午8点之前（不包含8点）显示“早晨好！”。
（2）每天上午12点之前（包含8点但不包含12点）显示“上午好！”。
（3）每天的12点至14点（包含12点但不包含14点）显示“中午好！”。
（4）每天的14点至17点（包含14点但不包含17点）显示“下午好！”。
（5）每天的17点之后（包含17点）显示“晚上好！”。
【任务实施】
在网页的【代码】视图中，将光标置于显示当前日期的JavaScript代码之后，即在“</script>”与“</div>”之间，然后输入表9-3所示的JavaScript代码。
表9-3 在不同时间段显示不同问候语的JavaScript代码
【任务9-1-3】实现动态改变网页中文本字体大小的网页特效
【任务描述】
动态改变网页中文本字体大小，满足不同浏览者的需求。编写JavaScript代码，实现动态改变网页中文本字体大小的功能。
【任务实施】
旅游网站的设计与制作html1．编写改变文本字体大小的JavaScript代码
在网页的【代码】视图中，将光标置于“</head>”之前，然后输入表9-5所示的JavaScript代码。
表9-5 动态改变网页中文本字体大小的JavaScript代码
2．设置超级链接，调用改变字体大小的函数
切换到【设计视图】，在“友情链接”所在的区块，选中文字“小”，然后在【属性】面板的“链接”列表框中输入代码“javascript:setFontSize(12)”，调用改变字体大小的函数。调用函数时传递的参数为“12”，即文本的字体大小为“12像素”。
以同样的方法选中文本“中”，在【属性】面板的“链接”列表框中输入代码“javascript:setFontSize(14.9)”；选中文本“大”，在“链接”列表框中输入代码“javascript:setFontSize(16)”。
【任务9-1-4】实现关闭网页时自动弹出对话框的特效
【任务描述】
当浏览者关闭所浏览的网页时自动弹出一个对话框，给浏览者留下深刻的印象。编写JavaScript代码，实现关闭网页时自动弹出对话框。
【任务实施】
在网页的【代码】视图中，将光标置于“</head>”之前，然后输入表9-6所示的JavaScript代码。
表9-6 关闭网页时自动弹出对话框的JavaScript代码
在标签“<body>”中输入代码“onUnload="openWin('感谢你光临本网站')"”，结果如下所示。
<body onUnload="openWin('感谢你光临本网站')" >
当关闭该网页中会弹出如图9-10所示的对话框。
图9-10 关闭网页时自动弹出的对话框
【任务9-1-5】实现滚动网页标题栏文字的特效
【任务描述】
为了吸引浏览者注意力，经常在网页标题栏中设置标题文字的滚动效果，以突出网站的主题。编写JavaScript代码，实现滚动网页标题栏中文字的功能。
【任务实施】
在网页的【代码】视图中，将光标置于“<head>”与“</head>”之间，然后输入表9-7所示的JavaScript代码。
表9-7 滚动标题栏文字的JavaScript代码之一

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。