第三十四节 JavaScript时钟

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script type="text/javascript">
 7         window.onload = function(){
 8             var oDiv = document.getElementById('div1');
 9 
10 
11             function fnMyclock(){
12                 var sNow = new Date();
13                 var iYear = sNow.getFullYear();
14                 var iMonth = sNow.getMonth() + 1;  // 这里的月是按0到11，所以要加一
15                 var iDate = sNow.getDate();
16                 var iWeek = sNow.getDay();  //星期是从0到6，0是表示星期天
17                 var iHour = sNow.getHours();            
18                 var iMinute = sNow.getMinutes();
19                 var iSecond = sNow.getSeconds();
20                 var sTr = '当前时间：' + iYear +'年' + iMonth + '月' +iDate + '日' + " " + fnToweek(iWeek) + ' ' +fnTodou(iHour) + ":" + fnTodou(iMinute) + ":" + fnTodou(iSecond);
21                 // 如果要写星期几和具体时间，需要写函数调节格式
22                 oDiv.innerHTML = sTr;
23             }
24 
25             fnMyclock();  //先调用一次，解决刚打开浏览器时的1s空白问题，和刷新间断问题
26             var timer = setInterval(fnMyclock,1000);  //调用有1s的延时
27 
28 
29             function fnTodou(n){
30                 if (n<10) {
31                     return '0' + n;
32                 }
33                 else{
34                     return n
35                 }
36             }
37 
38 
39             function fnToweek(iWeek){
40                 switch(iWeek){
41                     case 0:
42                         return '星期日';
43                         break;
44                     case 1:
45                         return '星期一';
46                         break;
47                     case 2:
48                         return '星期二';
49                         break;
50                     case 3:
51                         return '星期三';
52                         break;
53                     case 4:
54                         return '星期四';
55                         break;
56                     case 5:
57                         return '星期五';
58                         break;
59                     default:
60                         return '星期六';
61                 }
62             }
63         }
64     </script>
65     <style type="text/css">
66         div{
67             background-color: gold;
68             font-size: 20px;
69             height: 300px;
70             width: 1000px;
71             line-height: 300px;
72             margin: 50px auto 0;
73             text-align: center;
74         }
75     </style>
76 </head>
77 <body>
78     <div id="div1"></div>
79 </body>
80 </html>