【网页设计教案】JavaScript中Date对象及其应用.docVIP

教学项目二十一 JavaScript中Date对象及其应用 【教学内容】 讲解JavaScript中的内置 Date对象 【教学目的】 使学生学会设计与时间相关的JavaScript特效网页 【教学重点】 内置对象Date的使用 【教学难点】 内置对象Date的使用 【教学方式】 讨论式、案例分析式、练习式相结合 【教学参考】 1．JavaScript 入门与提高 杨浩著 清华大学出版社 2．Internet 网页工场 Wittime工作室 重庆出版社 3．JavaScript从入门到精通 电脑报社出版 4．JavaScript编程起步 人民邮电出版社 【教学过程】 【新课】 案例设计 设计倒记时网页： 分析： 此例中处理的是与时间相关的信息，要用到Date()对象； getTime(): 获取当前时间以毫秒作为计数单位的数值； 程序代码如下： html body script var tim=new Date(01/01/2005); var s=今天距离2005年1月1日; var now=new Date(); var ile=tim.getTime()-now.getTime(); var day1=Math.floor(ile/(1000*60*60*24)); document.write( +s+还有+day1+天); /script /body /html 案例二、设计分时显示不同信息的网页。 分析： 将时间分成不同时段： 4： 显示信息夜深了，请将喇叭的音量调小 4—7： 显示信息清晨好，您可真早呀!早饭吃了吗? 7—12： 显示信息上午好，您开始工作了？ 12—18：显示信息下午好，工作时间可别光顾着上网啊！ 18—23：显示信息晚上好，正是上网的好时机! 程序代码如下： html body script language=JavaScript !-- var mess1= ; document.write(centerfont color=#000000 ) day = new Date( ) hr = day.getHours( ) if (( hr =0 ) (hr = 4 )) mess1= 夜深了，请将喇叭的音量调小 if (( hr = 4 ) (hr 7)) mess1= 清晨好，您可真早呀!早饭吃了吗? if (( hr = 7 ) (hr 12)) mess1= 上午好，您开始工作了？ if (( hr = 12) (hr = 18)) mess1= 下午好，工作时间可别光顾着上网啊！ if ((hr = 18) (hr = 23)) mess1= 晚上好，正是上网的好时机! document.write(mess1); /script /body /html 案例三、设计网页， 将系统时间显示在按钮上。 分析： 使用Date()对象的getHour()、 getMInutes()、 getSeconds()方法 getHour()： 获取小时值； getMInutes()：获取当前分钟值； getSeconds()：获取当前秒钟值； 将显示时间的功能设计为函数clock() 程序代码如下： html head script LANGUAGE=JavaScript function clock() { today = new Date(); hrNow = today.getHours(); mnNow = today.getMinutes(); scNow = today.getSeconds(); if(hrNow = 11) { ap = AM; hour = hrNow; } else if (hrNow = 12) { hour = (hrNow - 12); ap = PM; } if (mnNow = 9) { min = 0 + mnNow; } else { (min = mnNow) } if (scNow = 9) { secs = 0 + scNow; } else { secs = scNow; } time =现在时间是：+ hour + : + min + : + secs + ap; document.form1.button1.value = time; setTimeout(clock(), 1000); } /script /head body onload=clock() form name=form1 input type=button name=button1 /f