javascript学习之Date对象

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