3.3 日期与时间
在应用网站中，为了方便用户经常需要动态地显示系统的当前日期及时间。下面通过几个实例详细介绍如何在网站中动态地显示日期与时间。
实例071 显示长日期格式的系统日期
本实例是一个美化界面、人性化的程序
实例位置：光盘\mingrisoft\03\071
实例说明
所谓长日期格式就是以“YYYY年MM月DD日 星期W”格式来显示。在网站的适当位置加入此格式的日期不仅可以美化界面，而且也可以达到方便用户的目的。例如在明日图书网站的导航条左侧就加入了以长日期格式显示的系统日期，运行本实例，在网页中将以长日期格式显示当前的系统日期，如图3.15所示。
图3.15 显示长日期格式的系统日期
技术要点
在JavaScript中获取系统日期可以使用Date对象。Date对象是一个有关日期和时间的对象，它具有动态性，即必须使用new运算符创建一个实例，例如：
mydate=new Date();
Date对象没有提供直接访问的属性，只具有获取和设置日期和时间的方法。Date对象的方法如表3.1所示。
表3.1 Date对象的方法
实现过程
（1）应用JavaScript编写将系统日期转换为长日期格式的函数clockon()，该函数只有一个参数bgclock，用于指定显示转换后的日期的<div>标记的名称，无返回值，并将函数clockon()保存在onclock.JS文件中。代码如下：
function clockon(bgclock){
var now=new Date(); //获取日期对象
var year=now.getYear(); //获取年
var month=now.getMonth(); //获取月
var date=now.getDate(); //获取日
var day=now.getDay(); //获取星期
var week;
month=month+1;
if(month<10)month="0"+month; //当月份小于10时，前补0
if(date<10)date="0"+date; //当日小于10时，前补0
var arr_week=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
week=arr_week[day]; //获取中文星期
var time="";
time=year+"年"+month+"月"+date+"日 "+week; //组合系统日期
if(document.all){
bgclock.innerHTML=" "+time //显示系统日期
}
var timer=setTimeout("clockon(bgclock)",60000); //每隔一分钟重新获取一次系统日期
}
（2）在需要显示该日期的页面中加入如下代码，将步骤（1）中编写的JavaScript代码包含到该页。
<script src="js/onclock.JS"></script>
（3）在需要显示该日期页面的<body>标记的onLoad事件中调用刚刚编写的clockon()函数，并将该页面中要显示系统日期的表格单元格的id设置为bgclock，关键代码如下：
<body onload="clockon(bgclock)">
<td width="46%" class="word_white" id="bgclock"> </td>
举一反三
根据本实例，读者可以：
实现显示短日期格式的系统日期；
实现显示带有问候语的系统日期。
实例072 实时显示系统时间
本实例是一个人性化的程序
实例位置：光盘\mingrisoft\03\072
实例说明
在网页中实时显示当前时间，不但可以给网页增色，还可以方便浏览者掌握当前时间。因此很多网页都加入了实时显示系统时间的功能。为了提高网站的开发速度，可以将实时显示系统时间的代码封装在一个单独的函数中，在需要时调用即可。例如，在鸿博图书馆管理系统中就使用了该函数，运行程序，在页面导航条的左侧将实时显示系统时间，如图3.16所示。
图3.16 实时显示系统时间
技术要点
实现实时显示系统时间的功能大致可分为以下5个步骤。
（1）创建Date()对象的实例，使用getYear()、getMonth()、getDate()、getDay()、getHours()、getMinutes()、getSeconds()方法获取当前系统时间中有关年、月、日、星期、时、分、秒的数据信息。
（2）使用getMonth()方法获取的月信息是从0开始计数的，所以要将月份对应的数据自动加1。（3）使用getDay()方法获取的星期信息是数值型数据，需要使用数组对象Array将其转换为对应的文字信息。
（4）将所有的数据组合并输出到浏览器上，需要使用<div>标记的innerHTML方法实现，该方法用于存取标记对象内的子标记和内容，不含标记对象本身。
（5）使用setTimeOut()方法使输出函数周期性运行。
实现过程
（1）应用JavaScript编写实时显示系统时间的函数clockon()，该函数只有一个参数bgclock，用于指定显示转换后日期的<div>标记的名称，无返回值，并将该函数保存在onclock.JS文件中。代码如下：
function clockon(bgclock){
var now=new Date(); //获取日期对象
var year=now.getYear(); //获取年
var month=now.getMonth(); //获取月
var date=now.getDate(); //获取日
var day=now.getDay(); //获取星期
var hour=now.getHours(); //获取小时
var minu=now.getMinutes(); //获取分钟
var sec=now.getSeconds(); //获取秒
var week;
month=month+1;
if(month<10)month="0"+month; //当月份小于10时，前补0
if(date<10)date="0"+date; //当日小于10时，前补0
if(hour<10)hour="0"+hour; //当小时小于10时，前补0
if(minu<10)minu="0"+minu; //当分钟小于10时，前补0
if(sec<10)sec="0"+sec; //当秒小于10时，前补0
var arr_week=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
week=arr_week[day]; //获取中文星期
var time="";
time=year+"年"+month+"月"+date+"日 "+week+""+hour+":"+minu+":"+sec; //组合系统时间
if(document.all){
bgclock.innerHTML="["+time+"]"; //显示系统时间
}
var timer=setTimeout("clockon(bgclock)",200); //每隔200毫秒重新获取一次系统时间
}
（2）在要实时显示系统时间的页面中加入如下代码，将步骤（1）中编写的JavaScript代码包含到该页。
<script src="JS/onclock.JS"></script>
（3）在需要实时显示系统时间的页面的<body>标记的onLoad事件中，调用刚刚编写的clockon()函数，并在该页面中适当的位置加入<div>标记，命名为bgclock，关键代码如下：
<body onLoad="clockon(bgclock)">
<div id="bgclock" class="word_Green"></div>
举一反三
根据本实例，读者可以：
实现在适当的网页中显示系统时间。
实例073 特殊日期提示
本实例是一个人性化的程序
实例位置：光盘\mingrisoft\03\073
实例说明
在设计开发网站时，可以在页面中加入显示系统日期的功能，如果在显示系统日期的同时能够显示相应的节日，可以给网站浏览者提供帮助。本实例将实现此功能。如果2009年5月1日这天运行此程序，将会显示图3.17所示的效果。
图3.17 特殊日期提示
技术要点
实现特殊日期提示的功能，大致可分为以下几个步骤。
（1）创建Date()对象的实例，使用getYear()、getMonth()，getDate()、getDay()方法获取当前系统时间中有关年、月、日、星期的数据信息。
（2）使用getMonth()方法获取的月信息是从0开始计数的，所以要将月份对应的数据自动加1。（3）使用getDay()方法获取的星期信息是数值型数据，需要使用数据对象Array将其转换为对应的文字信息。
（4）根据获取的月份和日判断显示的节日名称。
（5）将所有的数据组合并输出到浏览器上，需要使用<div>标记的innerHTML方法实现。
实现过程
（1）应用JavaScript编写特殊日期提示的函数datePrompt()，用于指定显示该特殊日期的<div>标记。提示特殊日期的自定义函数的代码如下：
<SCRIPT language="javascript">
<!--
function datePrompt(){
calendar=new Date(); //获取日期对象
day = calendar.getDay();
month=calendar.getMonth()+1; //获取月
date=calendar.getDate(); //获取日
year=calendar.getFullYear(); //获取4位的年
var dayname = new Array ("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
var time=year+"年"+month+"月"+date+"日 "+dayname[day]+""; //组合日期
var holiday="";
if ((month == 1) && (date == 1)) holiday="<font color=red>元旦";
if ((month == 5) && (date == 1)) holiday="<font color=red>国际劳动节";
if ((month == 5) && (date == 4)) holiday="<font color=red>青年节";
if ((month == 6) && (date == 1)) holiday="<font color=red>国际儿童节";
if ((month == 7) && (date == 1)) holiday="<font color=red>建党纪念日";
if ((month == 8) && (date == 1)) holiday="<font color=red>建军节";
if ((month == 10) && (date == 1)) holiday="<font color=red>国庆节";
if ((month == 12) && (date == 25)) holiday="<font color=red>圣诞节";
time=time+holiday;
clock.innerHTML=time; //显示系统日期，并进行特殊日期提示
}
//-->
</SCRIPT>
（2）在需要实时显示特殊日期时间的页面<body>标记的onLoad事件中，调用刚刚编写的datePrompt()函数，并在该页面中适当的位置加入<div>标记，通过以下代码来调用自定义函数，关键代码如下：
<body onLoad="datePrompt()">
<td width="219" height="27" align="center" background="images/1.JPG"><div id="clock">
</div></td>
说明：本实例只是给读者提供一个实现“特殊日期显示”的方法，对于其他节日请读者根据实际情况自己添加。
举一反三
根据本实例，读者可以：
开发会议到时提醒的程序；
开发所有节日提示的程序。