首页 > 代码库 > js 实现动态的图片时钟

js 实现动态的图片时钟

2024-08-13 19:52:33   219人阅读

效果如下图

技术分享

 附件有图片   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        else19         {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=http://www.mamicode.com/time1[i]+‘.png‘;   //时间字符串是什么，就显示什么图片34                 }35         }36         window.setInterval(tick, 1000);37         tick();  //为了一开始不显示00000038        39         40     }41 </script>42 43 </head>44 <body>45 <img src="http://www.mamicode.com/0.png"  />46 <img src="http://www.mamicode.com/0.png"  />47 ：48 <img src="http://www.mamicode.com/0.png"  />49 <img src="http://www.mamicode.com/0.png"  />50 ：51 <img src="http://www.mamicode.com/0.png"  />52 <img src="http://www.mamicode.com/0.png"  />53     54 </body>55 </html>

 

js 实现动态的图片时钟


联系
我们