实现效果

实现效果

图片素材

图片素材

原理分析

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

代码

1  2      3      4     : 5      6      7     : 8      9     10 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，更新src24                 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()来为一位数补038         function toDou(num) {39             return num < 10 ? "0" + num : "" + num;40         }

分析总结

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

2. 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 }

    

3. 由于setIteval(fn, 1000)的执行顺序是先延迟，再执行函数，所以在最后单独调用一下tick()，来防止刷新页面后的第一秒显示的是00：00：00。

4. 还有一点，复习下String对象的charAt()方法：

   charAt(index)方法可返回指定位置的字符（长度为1的字符串），如果index不在0和str.length之间将返回一个空字符串。