javascript – 如何在秒表上按“停止”后停止运行时间

2019年7月28日 218次阅读

我创造了这个秒表,它运行得很好.我遇到的唯一问题是每当我点击“停止”按钮时,屏幕上的时间停止,但它仍在后台运行.

有没有办法阻止这种情况发生？我希望计时器在当前时间停止,然后当我点击“开始”时,它从停止时开始重新开始.

我想可能在更新函数之前创建一个“new Date()”变量,在更新函数内部创建另一个“new Date()”变量,并以某种方式减去那些以获取当前日期.但我也无法解决这个问题.

start = document.getElementById('Start');
        stop = document.getElementById('Stop');
        let watchRunning = false;

        Start.addEventListener('click', startHandler);
        Stop.addEventListener('click', stopHandler);

        function startHandler() {
            if (!watchRunning) {
                watchRunning = setInterval(update, 70);
            }
        }
        function stopHandler() {
            clearInterval(watchRunning);
            watchRunning = null;
        }

        update();
        var seconds;
        var milliseconds;
        var d;

        function update() {
            d = new Date();
            seconds = d.getSeconds();
            milliseconds = Math.floor((d.getMilliseconds() / 10));

            if (milliseconds < 10 && seconds < 10) {
                document.getElementById("Time").innerHTML =
                    "0" + seconds + ".0" + milliseconds;

            } else if (milliseconds < 10 && seconds >= 10) {
                document.getElementById("Time").innerHTML =
                    seconds + ".0" + milliseconds;

            } else if (milliseconds >= 0 && seconds < 10) {
                document.getElementById("Time").innerHTML =
                    "0" + seconds + "." + milliseconds;

            } else if (milliseconds >= 0 && seconds >= 10) {
                document.getElementById("Time").innerHTML =
                    seconds + "." + milliseconds;
            }
        }
#Time {
            background-color: yellow;
            max-width: 2.3%;
        }
<h1>Stop Watch</h1>
    <button id="Start">Start</button>
    <button id="Stop">Stop</button>
    <h3>Elapsed Time:</h3>
    <p id="Time"></p>

尝试运行代码片段,你会看到我的意思.单击停止后,时间不会停止“运行”,当我单击开始时,它会恢复,就好像它从未停止过一样.

最佳答案

clearTimeout( return ID of setTimeout() );

clearTime变量由setTimeout()计时方法作为值返回,该方法可以作为ID传递给clearTimeout(ID)以引用它 – clearTimeout(clearTime);

这个怎么运作

每当在setTimeout()计时方法上调用clearTimeout()计时方法时,clearTimeout()计时方法将停止执行setTimeout()计时方法,但不会完全破坏其执行.

setTimeout()计时方法在调用clearTimeout()计时方法期间保持空闲状态,并且当您重新执行setTimeout()计时方法时,它将从其执行被停止的点开始,而不是从头开始从最开始.

你很高兴去！

点赞