js 實現動態的圖片時鍾

本文轉載自查看原文 2016-09-18 19:43 8326 JavaScript Fun

效果如下圖

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js實現動態數字時鍾 js動態數字時鍾 CSS3實現鼠標經過圖片時圖片放大 CSS3實現鼠標經過圖片時圖片放大 JS實現簡單時鍾效果 JS實現時鍾效果時間管理——高精度時鍾、動態時鍾——實現(二) js實現12小時時鍾網頁中通過js修改img的src屬性刷新圖片時，圖片緩存問題現象表述及問題解決 jQuery動態時鍾