码迷,mamicode.com
首页 > Web开发 > 详细

js 实现动态的图片时钟

时间:2016-09-18 20:58:19      阅读:248      评论:0      收藏:0      [点我收藏+]

标签:

效果如下图

技术分享

 附件有图片   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 实现动态的图片时钟

标签:

原文地址:http://www.cnblogs.com/biyongyao/p/5882807.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!