HTML+CSS+JavaScript实现电子时钟（数字换成图片）

目录

实现效果

实现思路

部分代码

HTML部分

JavaScript部分代码

---

实现效果

实现思路

• 将0-9数字图像命名为0.png-9.png；
• 先获取时间对象，用字符串表达时间（即”时“+”分“+”秒“），同时要注意当时间数字小于10的时候，我们获取的只有一位数，需要在前面添加数字0；
• 利用循环输出每一位对应的图像路径；
• 再利用定时功能修改图像。

部分代码

HTML部分

<div id="box1">

        <div id="clock">

            <div id="time1">

                <img src="../images/0.png" alt="">

                <img src="../images/0.png" alt="">

                <span>:</span>

                <img src="../images/0.png" alt="">

                <img src="../images/0.png" alt="">

                <span>:</span>

                <img src="../images/0.png" alt="">

                <img src="../images/0.png" alt="">

            </div>

        </div>

    </div>

JavaScript部分代码

<script>

        var imgs = document.querySelectorAll('img');

        function getNum(num){

            if(num<10){

                return '0'+num;

            }else{

                return ''+num;

            }

        }

        function toImg(){

            var myDate = new Date();

            var str = getNum(myDate.getHours())

                      + getNum(myDate.getMinutes())

                      + getNum(myDate.getSeconds());

           

            for(var i=0;i<imgs.length;i++){

                imgs[i].src = "../images/"+str.charAt(i)+".png";

            }

        }

        window.onload = function(){

            toImg();

            setInterval(toImg,1000);

        }

    </script>

如有问题，可以在评论区讨论一下。