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