教学项目二十一 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("<center><font 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 > </form> <body> </html> 【课后小结】 内置对象Date()的主要是处理与日期、时间相关的功能；在实现刷新时，通常会使用方法setTimeout()；在书写Date()的相应方法时，应注意大小写，否则可能不会实现设计的网页特效。