js 实现动态的图片时钟

Posted 2020-08-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js 实现动态的图片时钟相关的知识，希望对你有一定的参考价值。

效果如下图

技术分享

附件有图片 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>

以上是关于js 实现动态的图片时钟的主要内容，如果未能解决你的问题，请参考以下文章

js实现动态数字时钟

通过Canvas + JS 实现简易时钟实战