DIV+CSS网页制作实战第45次课(2课时)网页脚本应用实例.pptxVIP

课次 45 课时 2 教具 投影仪 项目 项目4 网页的脚本设计 任务 任务4.3 网页脚本应用实例 知识点 JavaScript 应用实例（90分钟） 重点 JavaScript 应用实例 难点 JavaScript 应用实例 备注 上机操作90分钟 / 18 1 / 18 2 知识技能目标 1. JavaScript 应用实例 / 18 3 4．2．1 任务分析 本任务在页面中加入JS脚本，练习和巩固所学的脚本知识，增强用户体验。   4．2．2 任务实施 1．任务场景 根据需要为前面制作的页面加入一些JS脚本效果，增强用户体验。具体操作内容是将例4-3的代码进行修改，将系统时间通过DIV显示在页面的指定位置。   2．操作环境 Windows 7、Dreamweaver   3．操作步骤 （1）在页面中加入javascript代码如下： script type=text/javascript language=javascript function show_cur_times(){ var date_time = new Date(); var year=date_time.getFullYear(); var month=date_time.getMonth()+1; if(month10){ month=0+month; } var day = date_time.getDate(); if(day10){ day=0+day; } var hours =date_time.getHours(); if(hours10){ hours=0+hours; } / 18 4 var minutes =date_time.getMinutes(); if(minutes10){ minutes=0+minutes; } var seconds=date_time.getSeconds(); if(seconds10){ seconds=0+seconds; } var date_str = hours+:+minutes+:+seconds; document.getElementById(timetext).innerHTML= date_str; document.getElementById(yeartext).innerHTML= year; document.getElementById(monthtext).innerHTML= month; document.getElementById(daytext).innerHTML= day; } setInterval(show_cur_times(),100); //每隔一秒调用一次 /script / 18 5 （2）在页面中加入HTML结构代码如下： divdiv style=float:left;时间：/div div id=timetext style= float:left; width:60px; height:15px;/div /div div style=clear:bothdiv style=float:left;年份：/div div id=yeartext style= float:left;width:60px; height:15px;/div /div div style=clear:bothdiv style=float:left;月份：/div div id=monthtext style= float:left;width:60px; height:15px;/div /div div style=clear:bothdiv style=float:left;日期：/div div id=daytext style= float:left;width:60px; height:15px;/div /div   （3）运行结果如下图所示。 / 18 6 4．课堂练习 例4-4 页面装入后，等3秒钟或点击“开始”按钮均打开网站。运行效果如下图所示。 headtitle自动执行的例子/title script language=JavaScript function NewWindow() { var my=open (,,toolbar=yes,menubar=yes,width=600,heigth=200)} /script/head body onload=timeout=setTimeout(NewWindow(),3000) H4若单击开始按钮或等待3秒钟自动进入页面。