前几天学习了一下date对象，于是写了一个简单的时间显示放到博客页面里(位于右上角)，类似这样的效果，时：分：秒 xxxx年xx月xx日。
下面来说一下具体实现步骤。
首先，既然date是一个对象，那么，在使用之前就需要创建这个对象var myDate = new Date();由于函数较简单且这个对象用的比较多，我就把它放到全局变量里面了。接着就要用这个对象现实时分秒年月日的显示。
首先，写显示时分秒的子函数。这个函数只要获取到时间之后显示到页面即可，需要的额外处理是分和秒只有一位数时要在前面加个0，然后这个函数要每隔1秒调用一次。
/*****************show hour & minutes & seconeds****************/
function showHms(){
var myDate = new Date();
var h=myDate.getHours();
var m=myDate.getMinutes();
var s=myDate.getSeconds();
m=checkTime(m);
s=checkTime(s);
document.getElementById("hms").innerHTML=h+":"+m+":"+s;
t=setTimeout("showHms()",1000);
} /**********add a zero in front of numbers<***********/
function checkTime(i){
if (i<10){
i="0" + i;
}
return i;
}
然后写显示星期的函数。getDay()返回的是阿拉伯数字0~6，为了把数字转换为星期X，需要把星期几的字符串放到数组里，getDay()返回的数字对应到数组下标即可。
/**************show weekday*****************/
function showWeekday(){
var weekday = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
document.getElementById("weekday").innerHTML = weekday[myDate.getDay()];
}
再写显示年月日的函数。要注意getMonth()返回的数字比实际月份小一个月，所以要加1，写成这样(myDate.getMonth()+1)后才可以用连接符。
/***********show year & month & day************/
function showYmd(){
document.getElementById("ymd").innerHTML = myDate.getFullYear()+"年"+(myDate.getMonth()+1)+"月"+myDate.getDate()+"日";
}
最后根据需要调用上面写的三个子函数，需要显示哪个就调用哪个。
/************show time*****************/
function startTime(){
showHms();
showWeekday();
showYmd();
}
最后就是显示函数在上面时候调用了，我们可以选择在页面加载时调用<body onload="startTime()">，也可以在页面加载完成时调用，把js代码放到页面代码最后面</body>前面。
下面贴出完整代码。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head> <body> <div id="time">
<span id="hms"></span>
<span id="weekday"></span>
<span id="ymd"></span>
</div> <script type ="text/javascript">
var myDate = new Date(); /*****************show hour & minutes & seconeds****************/
function showHms(){
var myDate = new Date();
var h=myDate.getHours();
var m=myDate.getMinutes();
var s=myDate.getSeconds();
m=checkTime(m);
s=checkTime(s);
document.getElementById("hms").innerHTML=h+":"+m+":"+s;
t=setTimeout("showHms()",1000);
} /**********add a zero in front of numbers<10***********/
function checkTime(i){
if (i<10){
i="0" + i;
}
return i;
} /**************show weekday*****************/
function showWeekday(){
var weekday = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
document.getElementById("weekday").innerHTML = weekday[myDate.getDay()];
} /***********show year & month & day************/
function showYmd(){
document.getElementById("ymd").innerHTML = myDate.getFullYear()+"年"+(myDate.getMonth()+1)+"月"+myDate.getDate()+"日";
} /************show time*****************/
function startTime(){
showHms();
showWeekday();
showYmd();
} startTime(); </script> </body>
</html>