湖北职业技术学院：《网页设计》理论课 教学项目二十一 JavaScript中Date对象及其应用

湖北职晚计算机科学与技术亲理论课教案一《网页设计》 教学项目二十 JavaScript中Date对象及其应用 【教学内容】 讲解 JavaScript中的内置Date对象 【教学目的】 使学生学会设计与时间相关的 JavaScript特效网页 【教学重点】 内置对象Date的使用 【教学难点】 内置对象Date的使用 【教学方式】 讨论式、案例分析式、练习式相结合 【教学参考】 杨浩著 清华大学出版社 2.< Internet网页工场〉 Wittime工作室重庆出版社 3.< JavaScript从入门到精通 电脑报社出版 4.< JavaScript编程起步〉 人民邮电出版社 【教学过程】 【新课】 案例设计 设计倒记时网页

湖北职院计算机科学与技术系理论课教案—《网页设计》 教学项目二十一 JavaScript 中 Date 对象及其应用 【教学内容】 讲解 JavaScript 中的内置 Date 对象 【教学目的】 使学生学会设计与时间相关的 JavaScript 特效网页 【教学重点】 内置对象 Date 的使用 【教学难点】 内置对象 Date 的使用 【教学方式】 讨论式、案例分析式、练习式相结合 【教学参考】 1．> 杨浩著 清华大学出版社 2．> Wittime 工作室 重庆出版社 3．> 电脑报社出版 4．> 人民邮电出版社 【教学过程】 【新课】 一、案例设计 设计倒记时网页：

湖北职晚计算机科学与技术亲理论课教案一《网页设计》 ge3 javassamp\2.htm一主 crosoft工r t五xD 文件更)编辑)查看Q收窳⑩)工具①)帮助 ⊙后··团的搜古收的媒体,品·□凸 M转到链接” 天距离2005年1月1日还有149天 创完毕 年 精品课程1asx 分析 此例中处理的是与时间相关的信息,要用到 Date对象 getTime(:获取当前时间以毫秒作为计数单位的数值; 程序代码如下: 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+"天"); /htmI> 案例二、设计分时显示不同信息的网页

湖北职院计算机科学与技术系理论课教案—《网页设计》 分析： 此例中处理的是与时间相关的信息，要用到 Date()对象； getTime(): 获取当前时间以毫秒作为计数单位的数值； 程序代码如下： 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+"天"); 案例二、设计分时显示不同信息的网页

湖北职晚计算机科学与技术亲理论课教案一《网页设计》 2c1柠效代码分时显示h黑一 icrosoft Internet Explorer 文件)编辑)查看收)工具①)帮助Q ⊙后:⊙因搜次收夹的媒件的应,图·口 地址@)包]6\特效代码分时昱示tm M转到链接 晚上好,正是上网的好时机 完毕 分析 将时间分成不同时段: 0—4:显示信息夜深了,请将喇叭的音量调小 7:显示信息清晨好,您可真早呀!早饭吃了吗? 7—12:显示信息上午好,您开始工作了? 12-18:显示信息下午好,工作时间可别光顾着上网啊! 18-23:显示信息晚上好,正是上网的好时机! 程序代码如下: var messi= document. write("") hr= day. getHourso) if((hr>=0)&&(hr=4)&&(hr=7)&&(hr=12)&&(hr<=18) me="下午好,工作时间可别光顾着上网啊!

湖北职院计算机科学与技术系理论课教案—《网页设计》 分析： 将时间分成不同时段： 0— 4： 显示信息夜深了，请将喇叭的音量调小 4—7： 显示信息清晨好，您可真早呀!早饭吃了吗? 7—12： 显示信息上午好，您开始工作了？ 12—18：显示信息下午好，工作时间可别光顾着上网啊！ 18—23：显示信息晚上好，正是上网的好时机! 程序代码如下： ") day = new Date( ) hr = day.getHours( ) if (( hr >=0 ) && (hr = 4 ) && (hr = 7 ) && (hr = 12) && (hr <= 18)) mess1= "下午好，工作时间可别光顾着上网啊！

湖北职晚计算机科学与技术亲理论课教案一《网页设计》 if(hr>=18)&&(hr function clock( today=new Date hrNow= today. getHourso mnNow =today. get MinutesO

湖北职院计算机科学与技术系理论课教案—《网页设计》 if ((hr >= 18) && (hr 案例三、设计网页， 将系统时间显示在按钮上。 分析： 使用 Date()对象的 getHour()、 getMInutes()、 getSeconds()方法 getHour()： 获取小时值； getMInutes()：获取当前分钟值； getSeconds()：获取当前秒钟值； 将显示时间的功能设计为函数 clock() 程序代码如下： function clock() { today = new Date(); hrNow = today.getHours(); mnNow = today.getMinutes(); scNow = today.getSeconds();

湖北职晚计算机科学与技术亲理论课教案一《网页设计》 if(hr Now=12)i our=(hrNow-12) ap="PM if(mnNow html 【课后小结】 内置对象 Date o的主要是处理与日期、时间相关的功能;在实现刷新时,通常会使

湖北职院计算机科学与技术系理论课教案—《网页设计》 if(hrNow = 12) { hour = (hrNow - 12); ap = " PM"; } if (mnNow 【课后小结】 内置对象 Date()的主要是处理与日期、时间相关的功能；在实现刷新时，通常会使

湖北职晚计算机科学与技术亲理论课教案一《网页设计》 用方法 setTimeout0;在书写 Date(的相应方法时,应注意大小写,否则可能不会实现设 计的网页特效

湖北职院计算机科学与技术系理论课教案—《网页设计》 用方法 setTimeout()；在书写 Date()的相应方法时，应注意大小写，否则可能不会实现设 计的网页特效