计时器配合格式化日期方法，在页面上实现，会动的时间 

1 <body>
2     <!-- 页面放个盒子，显示时间 -->
3     <div id="box" style="font-size: 50px; text-align: center;"></div>
4 </body>
 1 <script>
 2     // 创建补零函数
 3     function creatZero(n){
 4         if(n<10){
 5             return "0"+n;
 6         }
 7         return n;
 8     }
 9     // 创建格式化日期函数
10     function getDate(){
11         var obj = new Date();
12         var year = obj.getFullYear();
13         var month = obj.getMonth()+1;
14         var date = obj.getDate();
15         var day = obj.getDay();
16         var hour= obj.getHours();
17         var minute = obj.getMinutes();
18         var second = obj.getSeconds();
19         var mSecond = obj.getMilliseconds();
20         switch(day){
21             case 0 :day = "日";break;
22             case 1 :day = "一";break;
23             case 2 :day = "二";break;
24             case 3 :day = "三";break;
25             case 4 :day = "四";break;
26             case 5 :day = "五";break;
27             case 6 :day = "六";break;
28         }
29         return {
30             year:year,
31             month:creatZero(month),
32             date:creatZero(date),
33             day:day,
34             hour:creatZero(hour),
35             minute:creatZero(minute),
36             second:creatZero(second),
37             mSecond:mSecond
38         }
39     }
40     // 获取页面的盒子
41     var timeBox = document.getElementById("box");
42     // 计时器初始会等待一秒之后执行，所以刷新页面会有一秒空白，计时器前先执行一次可解决
43     // 然后将代码交给计时器执行即可
44     var d = getDate();
45     timeBox.innerHTML = d.year +"年"+ d.month +"月"+ d.date +"日星期"+ d.day +
46     " "+ d.hour +":" + d.minute +":"+ d.second;
47     // 利用计时器，每隔一秒，获取并拼接一次
48     setInterval(function(){
49         var d = getDate();
50         box.innerHTML = d.year +"年"+ d.month +"月"+ d.date +"日星期"+ d.day +
51         " "+ d.hour +":" + d.minute +":"+ d.second;
52     }, 1000);
53 </script>

 

posted @ 2020-05-17 22:42  永亮_workdog  阅读(204)  评论(0)    收藏  举报