用js制作数码时钟

实现效果

实现效果

图片素材

图片素材

原理分析

用setInterval（fn, 1000）来循环刷新图片。
用date对象的getHours()、getMinutes()、getSeconds()方法来获取当前的时、分、秒，并且拼接成字符串。
通过字符串的处理来改变<img>的src，从而达到改变图片显示的目的。

代码

 1 <body style="background:black; color: white; font-size:50px; padding: 50px 80px; ">
 2     <img src="images/0.png" />
 3     <img src="images/0.png" />
 4     :
 5     <img src="images/0.png" />
 6     <img src="images/0.png" />
 7     :
 8     <img src="images/0.png" />
 9     <img src="images/0.png" />
10 </body>
11         window.onload = function () {
12             //获取img元素数组
13             aImg = document.getElementsByTagName('img');
14 
15             function tick(){
16                 var oDate = new Date();
17 
18                 // 获取当前的时分秒拼接成长度为6的字符串
19                 var str = toDou(oDate.getHours()) + 
20                           toDou(oDate.getMinutes()) + 
21                           toDou(oDate.getSeconds());
22 
23                 // 遍历所有img，更新src
24                 for(var i = 0; i < aImg.length; i++){
25                     // 第i张图片的src对应str的第i为
26                     aImg[i].src = "images/" + str.charAt(i) + ".png";
27                 }
28             }
29 
30             // 设置定时器
31             setInterval(tick, 1000);
32 
33             // 初始化
34             tick()
35         }
36 
37         // 为了保证str的长度是6，用toDou()来为一位数补0
38         function toDou(num) {
39             return num < 10 ? "0" + num : "" + num;
40         }

分析总结

更新src的整体思路是通过长度为6 的字符串str和长度为6的aImg数组对象一一对应，而获取的时分秒有可能是一位数，所以用toDou(num)来补位。

toDou (num)中用的是三元运算符，简化了代码。

 1 //用if esle
 2 function toDou(num){
 3     if(n<10){
 4         return "0"+num;
 5     }else{
 6         return ""+num;
 7     }
 8 }
 9 //用三元运算符
10 function toDou(num) {
11     return num < 10 ? "0" + num : "" + num;
12 }

由于setIteval(fn, 1000)的执行顺序是先延迟，再执行函数，所以在最后单独调用一下tick()，来防止刷新页面后的第一秒显示的是00：00：00。
还有一点，复习下String对象的charAt()方法：
charAt(index)方法可返回指定位置的字符（长度为1的字符串），如果index不在0和str.length之间将返回一个空字符串。