js 实现动态的图片时钟

效果如下图

 附件有图片   https://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" alt="" />
46 <img src="0.png" alt="" />
47 ：
48 <img src="0.png" alt="" />
49 <img src="0.png" alt="" />
50 ：
51 <img src="0.png" alt="" />
52 <img src="0.png" alt="" />
53     
54 </body>
55 </html>

 

posted @ 2016-09-18 19:43  MrPat  阅读(10354)  评论(0)  编辑  收藏  举报