效果如下图
附件有图片 http://files.cnblogs.com/files/biyongyao/时钟.rar
源代码
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6 <title>Examples</title>
7 <style type="text/css">
8 body{
9 background:black;
10 color:white;
11 }
12 </style>
13 <script>
14 function toNum(num) //以为当是个位数时，要显示01的状态
15 {
16 if (num<10)
17 {return ‘0‘+num;}
18 else
19 {return ""+num;}
20
21 }
22 window.onload=function()
23 {
24
25 var obj=document.getElementsByTagName("img");
26 function tick()
27 {
28 var time= new Date();
29 var time1=toNum(time.getHours())+toNum(time.getMinutes())+toNum(time.getSeconds()); //获取小时分钟秒的一个字符串
30 // console.log(time1);
31 for (var i=0;i<obj.length;i++) //一个有六张图片，前两张代表小时，中间两张代表分钟，后两张代表秒，
32 {
33 obj[i].src=time1[i]+‘.png‘; //时间字符串是什么，就显示什么图片
34 }
35 }
36 window.setInterval(tick, 1000);
37 tick(); //为了一开始不显示000000
38
39
40 }
41 </script>
42
43 </head>
44 <body>
45 <img src="0.png" />
46 <img src="0.png" />
47 ：
48 <img src="0.png" />
49 <img src="0.png" />
50 ：
51 <img src="0.png" />
52 <img src="0.png" />
53
54 </body>
55 </html>
时间： 2024-10-10 09:23:53