明明放了定时器,为什么字符串不会自动更新呢?

小丑
  • 6

大家好,我是个刚自学了几天JS的小白,问题很幼稚吧,请指教。

需求:一个每隔一秒更新的时钟,格式如:08:21:29,个位数字前面要加零。
我的思路是先获取当时间的时、分、秒然后转成字符串,再把字符串的下标和数字图片数组的下标对应起来,然后再弄个setInterval每隔一秒执行。
现在的效果如图显示:图片描述
这效果乍看之下挺正常,但却不会自动更新图片。后来用alert输出了一下时间字符串,发现定时器正常,但每次输出的时间都是手动刷新的时间,明明放了定时器,为什么时间字符串不会自动更新呢?
代码如下:

<!DOCTYPE html>
<html>
<head>
    <title>数码时钟</title>
    <style type="text/css">
        .float{
            float: left;
            margin: 0 10px;
            font-size: 30px;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var imgs=document.getElementsByTagName('img');
            var timeSting=null;
            var now=new Date();
            setInterval(function(){
                function add0(h,min,s) {
                var n="0";
                    for (var i = 0; i <3; i++) {
                        if (arguments[i]<10) {
                            arguments[i]=n+arguments[i];
                        } 
                    }
                    return h+min+s;
            }
            timeSting=add0(now.getHours(),now.getMinutes(), now.getSeconds());
                for (var i = 0; i < 6; i++) {
                     imgs[i].src="./number/"+timeSting[i]+".gif";
                }
            },1000);     
        }
    </script>
</head>
    <body>
        <img class="float" src="">
        <img class="float" src="">
        <div class="float">:</div>
        <img class="float" src="">
        <img class="float" src="">
        <div class="float">:</div>
        <img class="float" src="">
        <img class="float" src="">
    </body>
</html>
评论
阅读 523
3 个回答

加一句打印语句

clipboard.png

发现, 都是同一个值

clipboard.png

now=new Date(); 这句放在定时器里面应该就好了

你定时器里面取的是定时器外面声明的now, 这样now是不会变的, 应该声明到定时器内部

你的这段定时器代码会每秒自动执行一次,但注意只是从定时器内部的函数开始执行。由于你在定时器内并没有声明最新的当前时间,只是获取了一次定时器外部的时间,所以在你的页面没有刷新之前定时器都没有再获取到新的当前时间。

宣传栏