1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style type="text/css">
7 *{
8 margin:0;
9 padding:0;
10 }
11 h2{
12 width:50px;
13 margin:0 auto;
14 }
15 div{
16 width: 300px;
17 text-align: center;
18 background: red;
19 margin:50px auto;
20 }
21 </style>
22 <script type="text/javascript">
23 window.onload= function () {
24 getTime();
25 setInterval(getTime,1000);
26 function getTime() {
27 var date = new Date();
28 var hours = date.getHours();
29 var one = parseInt(hours / 10);
30 var two = parseInt(hours % 10);
31 var minutes = date.getMinutes();
32 var three = parseInt(minutes / 10);
33 var four = parseInt(minutes % 10);
34 var second = date.getSeconds();
35 var five = parseInt(second / 10);
36 var six = parseInt(second % 10);
37 var imgs = document.getElementsByTagName("img");
38 imgs[0].src = "images/" + one + ".png";
39 imgs[1].src = "images/" + two + ".png";
40 imgs[2].src = "images/" + three + ".png";
41 imgs[3].src = "images/" + four + ".png";
42 imgs[4].src = "images/" + five + ".png";
43 imgs[5].src = "images/" + six + ".png";
44 }
45 }
46 </script>
47 </head>
48 <body>
49 <h2>时钟</h2>
50 <div>
51 <img src="images/0.png">
52 <img src="images/0.png">：
53 <img src="images/0.png">
54 <img src="images/0.png">：
55 <img src="images/0.png">
56 <img src="images/0.png">
57 </div>
58 </body>
59 </html>
