来源：http://www.cnblogs.com/QianBoy/p/7601171.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>炫酷时钟</title>
6 <style type="text/css">
7 body{
8 height: 100%;color: #51555c;
9 background: url("./img/bg1.png") no-repeat;
10 /* 背景图垂直、水平均居中 */
11 background-position: center center;
12
13 /* 背景图不平铺 */
14 background-repeat: no-repeat;
15
16 /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
17 background-attachment: fixed;
18
19 /* 让背景图基于容器大小伸缩 */
20 background-size: cover;
21
22 /* 设置背景颜色，背景图加载过程中会显示背景色 */
23 background-color: #464646;
24 }
25 img{
26 display: inline-block;
27 width: 28px;
28 height: 50px;
29 margin:0 4px;
30 }
31 .main_demo{
32 width: 910px;
33 min-height: 600px;
34 margin:30px auto 0 auto;
35 }
36 .main_demo h2{
37 text-align: center;
38 padding: 10px;
39 font-size: 40px;
40 color: wheat;
41 }
42 .clock{
43 width: 500px;
44 padding: 40px;
45 margin:2px auto;
46 }
47
48 .clock_right{
49 text-align: right;
50 margin:4px;
51 }
52 </style>
53 </head>
54 <body>
55 <div class="main_demo">
56 <div align="center">
57 <h2>Js 炫酷时钟</h2>
58 </div>
59 <div class="clock">
60 <!--10点-->
61 <img src="" />
62 <img src="" />
63 ：
64 <!--40分-->
65 <img src="" />
66 <img src="" />
67 ：
68 <!--*秒-->
69 <img src="" />
70 <img src="" />
71 <br />
72 <div class="clock_right">
73 <!--2017年-->
74 <img src="" />
75 <img src="" />
76 <img src="" />
77 <img src="" />
78 ：
79 <!--09月-->
80 <img src="" />
81 <img src="" />
82 ：
83 <!--27日-->
84 <img src="" />
85 <img src="" />
86 </div>
87 </div>
88 </div>
89
90 </body>
91 <script type="text/javascript">
92 var imgs = document.getElementsByTagName('img');
93 setInterval(getTime,1000);
94
95 function getTime(){
96 var _date = new Date();
97 var year = _date.getFullYear();
98 var month = _date.getMonth()+1;
99 var day = _date.getDate();
100 var hour = _date.getHours();
101 var minutes = _date.getMinutes();
102 var second = _date.getSeconds();
103 var newDate = addZero(hour) + "" + addZero(minutes)+ "" + addZero(second)+""+addZero(year) + "" + addZero(month)+ "" + addZero(day)
104 ;
105 console.log(newDate.length);
106 for(var i = 0;i < newDate.length;i++){
107 imgs[i].src = 'img/time_' + newDate[i] + '.png';
108 }
109 }
110
111 getTime();
112
113 function addZero(num){
114 if(num < 10){
115 num = "0" + num;
116 }
117 return num
118 }
119 </script>
120 </html>