时间戳

首页 > 解决方案 > 在秒表上按“停止”后如何停止运行时间

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

问题描述

我已经创建了这个秒表，它运行得很好。我遇到的唯一问题是，每当我单击“停止”按钮时，时间都会在屏幕上停止，但它仍在后台运行。

有没有办法阻止这种情况发生？我希望计时器在当前时间停止，然后当我单击“开始”时，它会从停止的时间恢复。

我想可能会在更新函数之前创建一个“新日期（）”变量，并在更新函数内部创建另一个“新日期（）”变量，然后以某种方式减去这些变量以获得当前日期。但我也想不通。

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>

尝试运行代码段，您会明白我的意思。单击停止后，时间不会停止“运行”，当我单击开始时，它会恢复，就好像它从未停止过一样。

标签： javascripthtmlfunctionevent-handlingstopwatch

解决方案

clearTimeout( return ID of setTimeout() );

clearTime 变量通过 setTimeout() 计时方法作为值返回，可以将其作为 ID 传递给 clearTimeout( ID ) 以引用它 - clearTimeout( clearTime )；

这个怎么运作

每当在激活的 setTimeout() 计时方法上调用 clearTimeout() 计时方法时，clearTimeout() 计时方法将停止 setTimeout() 计时方法的执行，但不会完全破坏其执行。

在调用 clearTimeout( ) 计时方法期间 setTimeout( ) 计时方法处于空闲状态，当您重新执行 setTimeout( ) 计时方法时，它将从停止执行的点开始，而不是从头开始从一开始就。

你可以走了！

推荐阅读