想做个计时器，但失败了

我正在尝试做最简单的计时器，只有一个数字，一直计数无限。请记住，我正试图纠正我的自己的代码，不要回答"这篇文章是…的副本"，因为我可能不会理解其他例子。由于某些原因，我的代码不工作，请帮助。

<!doctype html>
<html>
    <head>
    <style>
    #screen {
    position: relative;
    border: 2px solid black;
    width: 800px;
    height: 600px;
    top: 50px;
    left: 500px;
    }
    #chronometer {
    position: absolute;
    top: 150px;
    left: 300px;
    font-size: 100px;
    width: 300px;
    height: 300px;
    }
    </style>
    </head>
    <body>
    <div id="screen">
        <div id="chronometer"></div>
    </div>
    <script>
    var chronometer = setInterval(increaseChronometer, 1000);
    function increaseChronometer () {
        var chronometerNumber = 1;
        document.getElementById("chronometer").innerHTML = chronometerNumber;
        chronometerNumber++;
    }
    </script>
    </body>
</html>

您在函数中定义了"chronometerNumber"变量，因此每次调用该函数时，它都会被创建并初始化为"1"。

只要把"var chronometerNumber=1"这行移到函数外面，它应该可以正常工作。

嗨，我想我成功了!

<!doctype html>
<html>
    <head>
    <style>
    #screen {
    position: relative;
    border: 2px solid black;
    width: 800px;
    height: 600px;
    top: 50px;
    left: 500px;
    }
    #chronometer {
    position: absolute;
    top: 150px;
    left: 300px;
    font-size: 100px;
    width: 300px;
    height: 300px;
    }
    </style>
    </head>
    <body>
    <div id="screen">
        <div id="chronometer"></div>
    </div>
    <script>
    var chronometerNumber = 1;
    var chronometer = setInterval(  function increaseChronometer () {
    document.getElementById("chronometer").innerHTML = chronometerNumber;
    chronometerNumber++;
    }, 1000); 
    </script>
    </body>
</html>

在setInterval (){}函数的参考中，你必须创建一个匿名函数，它将在超时后每次调用，我这样做了，我把你的函数放在setInterval function里面，我也把你的var chronometerNumber = 1;声明移到函数外面，因为如果它在那里，每次调用函数，你的计数器将从一个开始，一次又一次，等等，你每次只会看到一个。

相关内容

最新更新

热门标签：