javascript学习之Date对象

　　前几天学习了一下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   }

View Code

　　然后写显示星期的函数。getDay()返回的是阿拉伯数字0~6，为了把数字转换为星期X，需要把星期几的字符串放到数组里，getDay()返回的数字对应到数组下标即可。

1   /**************show weekday*****************/
2   function showWeekday(){
3       var weekday = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
4       document.getElementById("weekday").innerHTML = weekday[myDate.getDay()];
5   }

View Code

　　再写显示年月日的函数。要注意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   }

View Code

　　最后根据需要调用上面写的三个子函数，需要显示哪个就调用哪个。

1   /************show time*****************/
2   function startTime(){
3       showHms();
4       showWeekday();
5       showYmd();
6   }

View Code

　　最后就是显示函数在上面时候调用了，我们可以选择在页面加载时调用<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>

View Code