中职高教版《网页设计与制作任务驱动教程》9.1制作包含特效的“云南旅游”网页课件

1 单元9 制作包含特效的网页 【任务9-1】制作包含特效的“云南旅游”网页 《网页设计与制作任务驱动教程（第3版）》 1 2 网页0901.html的最终浏览效果如图9-6所示。 图9-6 网页0901.html的最终浏览效果 《网页设计与制作任务驱动教程（第3版）》 3 【任务描述】 【任务9-1-1】实现在网页中显示当前 日期的特效 在网页0901.html中文字“云南风光”的右侧显示当前日期及星期数，日期格式及顺序如图9-7所示。 图9-7 网页中显示当前日期及星期数的格式 《网页设计与制作任务驱动教程（第3版）》 4 【任务实施】 切换到【代码】视图，将光标置于“云南风光”的右侧，光标位置如图9-8所示。 图9-8 【代码】视图中的光标位置1 《网页设计与制作任务驱动教程（第3版）》 5 在光标位置输入表9-1所示的JavaScript代码。 表9-1 显示当前日期的JavaScript代码之一 行号 JavaScript代码 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 <script language="JavaScript" type="text/javascript"> <!-- var tempDate , year, month , day ; tempDate = new Date(); year= tempDate.getFullYear (); month= tempDate.getMonth() + 1 ; day = tempDate.getDate(); document.write(year+"年"+month+"月"+day+"日"); var weekArray=new Array(6); weekArray[0]="星期日" ; weekArray[1]="星期一" ; weekArray[2]="星期二" ; weekArray[3]="星期三" ; weekArray[4]="星期四" ; weekArray[5]="星期五" ; weekArray[6]="星期六" ; weekday=tempDate.getDay(); document.write(weekArray[weekday]) ; // --> </script> 《网页设计与制作任务驱动教程（第3版）》 5 6 【任务描述】 【任务9-1-2】实现在不同时间段显示 不同问候语的网页特效 应用JavaScript的if…else if语句，在网页0901.html中当前日期及星期数的右侧根据不同时间段（采用24小时制）显示相应的问候语，具体要求如下： 《网页设计与制作任务驱动教程（第3版）》 7 （1）每天上午8点之前（不包含8点）显示“早晨好！”。 （2）每天上午12点之前（包含8点但不包含12点）显示“上午好！”。 （3）每天的12点至14点（包含12点但不包含14点）显示“中午好！”。 《网页设计与制作任务驱动教程（第3版）》 8 （4）每天的14点至17点（包含14点但不包含17点）显示“下午好！”。 （5）每天的17点之后（包含17点）显示“晚上好！”。 《网页设计与制作任务驱动教程（第3版）》 8 9 【任务实施】 在网页的【代码】视图中，将光标置于显示当前日期的JavaScript代码之后，即在“</script>”与“</div>”之间，然后输入表9-3所示的JavaScript代码。 《网页设计与制作任务驱动教程（第3版）》 10 行号 JavaScript代码 01 02 03 04 05 06 07 08 09 10 11 12 <script language="JavaScript" type="text/javascript"> <!-- var today , hour ; today = new Date() ; hour = today.getHours() ; if (hour < 8) { document.write("&nbsp;早晨好!") ; } else if (hour < 12) { document.write("&nbsp;上午好!") ; } else if (hour < 14) { doc