文档介绍：教学项目二十一 JavaScript中Date对象及其应用
【基本内容】
讲解JavaScript中的内置 Date对象
【教学要求】
学会设计与时间相关的JavaScript特效网页
一、案例设计
设计倒记时网页:
分析:
此例中处理的是与时间相关的信息,要用到Date()对象;
getTime(): 获取当前时间以毫秒作为计数单位的数值;
程序代码如下:
<html>
<body>
<script>
var tim=new Date("01/01/2005");
var s="今天距离2005年1月1日";
var now=new Date();
var ile=()-();
var day1=(ile/(1000*60*60*24));
(" "+s+"还有"+day1+"天");
</script>
</body>
</html>
案例二、设计分时显示不同信息的网页
分析:
将时间分成不同时段:
0―4: 显示信息夜深了,请将喇叭的音量调小
4—7: 显示信息清晨好,您可真早呀!早饭吃了吗?
7—12: 显示信息上午好,您开始工作了?
12—18:显示信息下午好,工作时间可别光顾着上网啊!
18—23:显示信息晚上好,正是上网的好时机!
程序代码如下:
<html>
<body>
<script language="JavaScript">
var mess1=" ";
("<center><font color='#000000' >")
day = new Date( )
hr = ( )
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= "晚上好,正是上网的好时机! "
(mess1);
</script>
</body>
</html>
案例三、设计网页,将系统时间显示在按钮上
分析:
使用Date()对象的getHour()、 getMInutes()、 getSeconds()
方法
getHour(): 获取小时值;
getMInutes():获取当前分钟值;
getSeconds():获取当前秒钟值;
将显示时间的功能设计为函数clock()
程序代码如下:
<html>
<head>
<script LANGUAGE="JavaScript">
function clock()
{
today = new Date();
hrNow = ();
mnNow = ();
scNow = ();
 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;
= time;
setTimeout('clock()', 1000);
}
</script>
</head>
<body onload=clock()>
<form name=form1>
<input type=button name=button1 >
</form>
<body>
</html>