原生js实现[1] 数码时钟

If you smile when no one else is around,you really mean it.

实现效果

实现效果

图片素材

图片素材

原理分析

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

代码


<body style="background:black; color: white; font-size:50px; padding: 50px 80px; ">
    <img src="images/0.png" />
    <img src="images/0.png" />
    :
    <img src="images/0.png" />
    <img src="images/0.png" />
    :
    <img src="images/0.png" />
    <img src="images/0.png" />
</body>


        window.onload = function () {
            //获取img元素数组
            aImg = document.getElementsByTagName('img');

            function tick(){
                var oDate = new Date();

                // 获取当前的时分秒拼接成长度为6的字符串
                var str = toDou(oDate.getHours()) + 
                          toDou(oDate.getMinutes()) + 
                          toDou(oDate.getSeconds());

                // 遍历所有img，更新src
                for(var i = 0; i < aImg.length; i++){
                    // 第i张图片的src对应str的第i为
                    aImg[i].src = "images/" + str.charAt(i) + ".png";
                }
            }

            // 设置定时器
            setInterval(tick, 1000);

            // 初始化
            tick()
        }

        // 为了保证str的长度是6，用toDou()来为一位数补0
        function toDou(num) {
            return num < 10 ? "0" + num : "" + num;
        }

分析总结

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

//用if esle
function toDou(num){
     if(n<10){
         return "0"+num;
     }else{
         return ""+num;
     }
}
//用三元运算符
function toDou(num) {
     return num < 10 ? "0" + num : "" + num;
}

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

原生js实现[1] 数码时钟

推荐阅读更多精彩内容