教学项目二十一 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=tim.getTime()-now.getTime();
var day1=Math.floor(ile/(1000*60*60*24));
document.write(" "+s+"还有 "+day1+"天 ");
</script>
</body>
</html>
案例二、设计分时显示不同信息的网页
分析,
将时间分成不同时段,
0― ４,显示信息夜深了, 请将喇叭的音量调小
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()的相应方法时，应注意大小写，否则可能不会实现
设计的网页特效。
【课后小结】