Question

我正在使用setInterval（）和clearInterval（）方法来定时和分别停止定时器。我正在使用两个按钮＆＃34;启动计时器＆＃34;和＆＃34;停止计时器＆＃34;。当我点击＆＃34;停止计时器＆＃34;按钮时间停止，点击＆＃34;启动计时器＆＃34;按钮停止，然后点击＆＃34;停止计时器＆＃34;再次按钮时间不会停止。你能帮帮我吗？这是我的代码：

<html lang="en">
    <head>
        <title>Document</title>
    </head>
    <body>
        <p id="start"></p>
        <button onClick = "startTimer()">Start Timer </button>
        <button onClick = "stopTimer()"> Stop Timer </button>
        <script>
            var myVar = setInterval(function(){myTimer()},1000);
            function myTimer()
            {
                var time = new Date();
                var t = time.toLocaleTimeString();
                document.getElementById("start").innerHTML = t;
            }
            function startTimer()
            {
                setInterval(function(){myTimer()}, 1000);
            }
            function stopTimer()
            {
                clearInterval(myVar);
            }
        </script>
    </body>
</html>

Answer 1

您没有在startTimer（）函数中为myVar变量指定间隔。因为stopTimer（）没有清除startTimer（）函数设置的间隔..

为了更安全，您可以在设置之前清除间隔。否则，如果用户多次点击开始计时器按钮，则计时器停止按钮不再工作。因为设置了新的间隔而没有清除前一个间隔，所以之前未被清除的间隔将运行...

<html lang="en">
    <head>
        <title>Document</title>
    </head>
    <body>
        <p id="start"></p>
        <button onClick = "startTimer()">Start Timer </button>
        <button onClick = "stopTimer()"> Stop Timer </button>
        <script>
            var myVar;
            startTimer();
            function myTimer()
            {
                var time = new Date();
                var t = time.toLocaleTimeString();
                document.getElementById("start").innerHTML = t;
            }
            function startTimer()
            {
                clearInterval(myVar);
                myVar = setInterval(function(){myTimer()}, 1000);
            }
            function stopTimer()
            {
                clearInterval(myVar);
            }
        </script>
    </body>
</html>

Answer 2

试试这个：

function startTimer()
{
    myVar=setInterval(function(){myTimer()}, 1000);
}

Answer 3

<html lang="en">
    <head>
        <title>Document</title>
    </head>
    <body>
        <p id="start"></p>
        <button onClick = "startTimer()">Start Timer </button>
        <button onClick = "stopTimer()"> Stop Timer </button>
        <script>
            var myVar = setInterval(function(){myTimer()},1000);
            function myTimer()
            {
                var time = new Date();
                var t = time.toLocaleTimeString();
                document.getElementById("start").innerHTML = t;
            }
            function startTimer()
            {
               myVar = setInterval(function(){myTimer()}, 1000);
            }
            function stopTimer()
            {
                clearInterval(myVar);
            }
        </script>
    </body>
</html>

启动计时器后没有按钮

3 个答案: