湖北职晚计算机科学与技术亲理论课教案一《网页设计》 教学项目二十 JavaScript中Date对象及其应用 【教学内容】 讲解 JavaScript中的内置Date对象 【教学目的】 使学生学会设计与时间相关的 JavaScript特效网页 【教学重点】 内置对象Date的使用 【教学难点】 内置对象Date的使用 【教学方式】 讨论式、案例分析式、练习式相结合 【教学参考】 < JavaScript入门与提高〉>杨浩著 清华大学出版社 2.< Internet网页工场〉 Wittime工作室重庆出版社 3.< JavaScript从入门到精通 电脑报社出版 4.< JavaScript编程起步〉 人民邮电出版社 【教学过程】 【新课】 案例设计 设计倒记时网页
湖北职院计算机科学与技术系理论课教案—《网页设计》 教学项目二十一 JavaScript 中 Date 对象及其应用 【教学内容】 讲解 JavaScript 中的内置 Date 对象 【教学目的】 使学生学会设计与时间相关的 JavaScript 特效网页 【教学重点】 内置对象 Date 的使用 【教学难点】 内置对象 Date 的使用 【教学方式】 讨论式、案例分析式、练习式相结合 【教学参考】 1．<<JavaScript 入门与提高>> 杨浩著 清华大学出版社 2．<<Internet 网页工场>> Wittime 工作室 重庆出版社 3．<<JavaScript 从入门到精通>> 电脑报社出版 4．<<JavaScript 编程起步>> 人民邮电出版社 【教学过程】 【新课】 一、案例设计 设计倒记时网页：
湖北职晚计算机科学与技术亲理论课教案一《网页设计》 ge3 javassamp\2.htm一主 crosoft工r t五xD 文件更)编辑)查看Q收窳⑩)工具①)帮助 ⊙后··团的搜古收的媒体,品·□凸 M转到链接” 天距离2005年1月1日还有149天 创完毕 年 精品课程1asx 分析 此例中处理的是与时间相关的信息,要用到 Date对象 getTime(:获取当前时间以毫秒作为计数单位的数值; 程序代码如下: <script> var tim=new Date(01/01/2005"); vars"今天距离2005年1月1日"; var now=new Date var ile=tim getTime(-now get Time(; var day l=Math. floor(ile/(1000*60*60*24)); document. write(""+s+"还有"+dayl+"天"); </script> /htmI> 案例二、设计分时显示不同信息的网页
湖北职院计算机科学与技术系理论课教案—《网页设计》 分析： 此例中处理的是与时间相关的信息，要用到 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> 案例二、设计分时显示不同信息的网页
湖北职晚计算机科学与技术亲理论课教案一《网页设计》 2c1柠效代码分时显示h黑一 icrosoft Internet Explorer 文件)编辑)查看收)工具①)帮助Q ⊙后:⊙因搜次收夹的媒件的应,图·口 地址@)包]6\特效代码分时昱示tm M转到链接 晚上好,正是上网的好时机 完毕 分析 将时间分成不同时段: 0—4:显示信息夜深了,请将喇叭的音量调小 7:显示信息清晨好,您可真早呀!早饭吃了吗? 7—12:显示信息上午好,您开始工作了? 12-18:显示信息下午好,工作时间可别光顾着上网啊! 18-23:显示信息晚上好,正是上网的好时机! 程序代码如下: <script language="JavaScript"> var messi= document. write("<center><font color=#000000>") hr= day. getHourso) if((hr>=0)&&(hr<=4)) mes="夜深了,请将喇叭的音量调小" if((hr>=4)&&(hr<7) mes=”清晨好,您可真早呀!早饭吃了吗? f(hr>=7)&&(hr<12) mesl="上午好,您开始工作了? f(hr>=12)&&(hr<=18) me="下午好,工作时间可别光顾着上网啊!
湖北职院计算机科学与技术系理论课教案—《网页设计》 分析： 将时间分成不同时段： 0— 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) mes="晚上好,正是上网的好时机!" document. write( messi) <script /html 案例三、设计网页,将系统时间显示在按钮上 文件①)编辑)查看①收)工具①)帮助QD ⊙后因团谷搜素次收障买媒创,品,回当 地址@)6:特效代码 tme. htm M曰转到链接” C现在时间是:7:67:52理 开给特效代码 ]a21.d63matr9:\特效代码 分析: 使用 Date对象的 gethour()、 get MInutes(、 getSecondso方法 get Hour:获取小时值 getMInutes):获取当前分钟值; getseconds():获取当前秒钟值; 将显示时间的功能设计为函数 clock( 程序代码如下: <html> <script LANGUAGE="JavaScript"> function clock( today=new Date hrNow= today. getHourso mnNow =today. get MinutesO
湖北职院计算机科学与技术系理论课教案—《网页设计》 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(hr Now<=11) our= hrNow (hrNow >=12)i our=(hrNow-12) ap="PM if(mnNow <=9)i min=0"+miNnow: else (min=miNnow) if(snOw <=9) secs=0"+ snOw: secs=snOw. time="现在时间是:"+hour+""+min+""+ document forml button value =time set Timeout('clock o, 1000) body onload=clock(> < <input type=button name=button1> </form> html 【课后小结】 内置对象 Date o的主要是处理与日期、时间相关的功能;在实现刷新时,通常会使
湖北职院计算机科学与技术系理论课教案—《网页设计》 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()的主要是处理与日期、时间相关的功能；在实现刷新时，通常会使