JavaScript—定时器使用—用图片制作实时动态数字时钟

最新推荐文章于 2024-04-15 19:39:02 发布

原创最新推荐文章于 2024-04-15 19:39:02 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的数字时钟动态显示方法，通过定时更新页面上的图片来实时显示当前时间。利用toDou函数为单个数字前添加零，确保时间格式统一。在页面加载完成后立即调用Ticker函数防止初始全零显示。

数字时钟、、、、、、、 setInterval(Ticker, 1000);
。。。。。、、、、、、、、、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数字时钟</title>
    <script>
        function toDou(n){      //  字符串添0
            if (n<10){ return '0'+n }
            else{return ''+n}
        }

        window.onload=function () {
            var imgSet=document.getElementsByTagName('img');

            function Ticker (){
                //  var  str='123321';
                var oDate= new Date();
                //  01+34+45   添0
                var str=toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());

                for(var  i=0; i<imgSet.length; i++){
                    imgSet[i].src='img/'+ str.charAt(i) + '.png';     //  str[i]   改成   str.charAt(i)--取字符串的某一位  为了兼容低版本的浏览器
                }
            }    //  一秒刷新一次，但是刚开始会出现全0，是因为一秒之后才刷新

            setInterval(Ticker, 1000);    //  Ticker 对的，，，Ticker（） 错的
            Ticker();   //  onload 之后直接执行就不会出现全0
        };
    </script>

</head>
<body   style="background: black;    color: white;   text-align: center;  font-size: 180px">
<img  src="img/0.png"  width="150px"   height="250px"  align="center"/>
<img  src="img/0.png"  width="150px"   height="250px"  align="center" />
:
<img  src="img/0.png"   width="150px"   height="250px" align="center"/>
<img  src="img/0.png"   width="150px"   height="250px" align="center" />
:
<img  src="img/0.png"    width="150px"   height="250px" align="center"/>
<img  src="img/0.png"     width="150px"   height="250px" align="center"/>
</body>
</html>