教学项目二十一 JavaScript中Date对象及其应用 基本内容】 讲解 JavaScript中的内置Date对象 教学要求】 学会设计与时间相关的 Javascrip特效网页 案例设计 设计倒记时网页
教学项目二十一 JavaScript中Date对象及其应用 【基本内容】 讲解JavaScript中的内置 Date对象 【教学要求】 学会设计与时间相关的JavaScript特效网页 一、案例设计 设计倒记时网页：
a G: \FrontPage\javaSsamp\2. htm-Iicrosoft Internet Explorer 回回区 文件)编辑￠)查看Q收藏()工具)帮助0 地址①)包6:1 rootAge小 javassamp12,htm 转到链接” 今天距离2005年1月1日还有149天 精品课程 class20 「网1a1as21 rtE、61romt
分析: 此例中处理的是与时间相关的信息,要用到 Date对象 getTime o:获取当前时间以亳秒作为计数单位的数值; 程序代码如下: var tim=new Date( 01/01/2005 vars="今天距离2005年1月1日"; var now=new Dated var ile=tim getTime(-now getTime 0: var dayl=Math. floor(ile/(1000*60*60*24)) document. write(""+s+"还有"+day1+"天");
分析： 此例中处理的是与时间相关的信息，要用到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+"天");
案例二、设计分时显示不同信息的网页 强G:\特效代码1分时显示M一 crosoft Internet Explorer 回回区 文件①)编辑)查看收藏〔)工具①)帮助0 ⊙后:冈的搜索次收的媒体,·回当 地址①)包G:\特效代码分时显示M 转到锤接” 晚上好,正是上网的好时机! 完毕 特效代码 KMi crosof 2工nter .E2.htm
案例二、设计分时显示不同信息的网页
分析: 将时间分成不同时段 0-4:显示信息夜深了,请将喇叭的音量调小 4—7:显示信息清晨好,您可真早呀!早饭吃了吗? 7—12:显示信息上午好,您开始工作了? 12-18:显示信息下午好,工作时间可别光顾着上网啊! 18-23:显示信息晚上好,正是上网的好时机!
分析： 将时间分成不同时段： 0―４： 显示信息夜深了，请将喇叭的音量调小 4—7： 显示信息清晨好，您可真早呀!早饭吃了吗? 7—12： 显示信息上午好，您开始工作了？ 12—18：显示信息下午好，工作时间可别光顾着上网啊！ 18—23：显示信息晚上好，正是上网的好时机!
程序代码如下: if(hr>=12)&&(hr mesl="下午好,工作时间可别光顾着上 Script language=" JavaScript"> 网啊! var messla if(hr>=18)&&(hr hr= day. gethourso) if(hr>=0)&&(hr=4)&&(hr=7)&&(hr<12) mes!l="上午好,您开始工作了?
程序代码如下： var mess1=" " ; document.write("") day = new Date( ) hr = day.getHours( ) if (( hr >=0 ) && (hr = 4 ) && (hr = 7 ) && (hr = 12) && (hr = 18) && (hr
案例三、设计网页,将系统时间显示在按钮上 G:1特效代码\te5.htm-夏 icrosoft Internet Explorer 回回 文件①)编辑)查看)收藏)工具〔)帮助Q ⊙后·P搜收来的媒的,品圆·回 地址①)包G:\特效代码t5htm M转到链接” 现在时间是:7:57:52PM 完毕 特效代码 函c1as21,doc- Microsoft.强61特效代码t
案例三、设计网页，将系统时间显示在按钮上
分析: 使用 DateD对象的 getHour(、 getMInutes0、 getSeconds0 方法 getHour(:获取小时值; getMInutes0:获取当前分钟值; getSeconds o:获取当前秒钟值; 将显示时间的功能设计为函数c1ockQ
分析： 使用Date()对象的getHour()、 getMInutes()、 getSeconds() 方法 getHour()： 获取小时值； getMInutes()：获取当前分钟值； getSeconds()：获取当前秒钟值； 将显示时间的功能设计为函数clock()
程序代码如下: se if (hrNow >=12)i ea our (hrNow-12) Script LANGUAGE="JavaScript"> ap PM function clocko if (mn Now <=9)( today new Date o min="0″+ miNnow; hrNow=today. getHours o mnNow today. getMinuteso e⊥se snOw= today. getSeconds o if (hrNow<=11) (min mnNow) ap AM if (snOw hour hrNow secs=0"+ scNow: J
程序代码如下： function clock() { today = new Date(); hrNow = today.getHours(); mnNow = today.getMinutes(); scNow = today.getSeconds(); 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 snOw: time="现在时间是:"+hour+":" min +: secs t ap; document form1. button1. value= time setTimeout( clocko', 1000) K/script> Input type=button name=button1 /html
else { secs = scNow; } time ="现在时间是："+ hour + " : " + min + " : " + secs + ap; document.form1.button1.value = time; setTimeout('clock()', 1000); }