如何使用带有 "update" 函数的事件处理程序来启动和停止秒表

Question

我需要将事件处理程序附加到更新函数，以便停止按钮将停止时间，而开始按钮将再次启动它。

我已经尝试了多种方法来做到这一点，如函数处理程序所示。但我似乎无法让它工作。

stop = document.getElementById('Stop');
        var watchRunning = new Boolean(false);

        Start.addEventListener('click', startHandler);

        function startHandler() {
            d.watchRunning = true;
        }

        Stop.addEventListener('click', stopHandler);

        function stopHandler() {
            stop.onclick = function() {
                clearTimeout(watchRunning);
            }
        }

        update();
        var testVar = window.setInterval(update, 10);
        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: 5%;
        }

<h1>Stop Watch</h1>
    <button id="Start">Start</button>
    <button id="Stop">Stop</button>
    <h3>Elapsed Time:</h3>
    <p id="Time"></p>

有什么办法可以使这些工作正常吗？我需要在哪里更新我的更新功能？任何提示都有帮助。

Answer 1

好吧，如果尚未设置，我要做的只是 setInterval 当按下 "Start" 时； clearInterval 在 "Stop" 上。剧透：

const stop = document.getElementById('Stop');
const start = document.getElementById('Start');
let watchIntervalTimer;

function startHandler() {
    if (!watchIntervalTimer) {  // If it's not set.
        watchIntervalTimer = setInterval(update, 10);
    }
}

function stopHandler() {
    clearInterval(watchIntervalTimer);
    watchIntervalTimer = null;  // So we can identify that it's reset.
}

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

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: 5%;
}

<h1>Stop Watch</h1>
<button id="Start">Start</button>
<button id="Stop">Stop</button>
<h3>Elapsed Time:</h3>
<p id="Time"></p>

Answer 2

如果你想减去时间，你可以这样做。

开始时，记下当前时间。
更新时，看看自上次记下以来已经过了多少时间，将其添加到总时间中，再次记下当前时间。
停止时，停止更新计时器。

剧透：

const stop = document.getElementById('Stop');
const start = document.getElementById('Start');
let watchIntervalTimer;
let countingSince;

function startHandler() {
    if (!watchIntervalTimer) {  // If it's not set.
        watchIntervalTimer = setInterval(updateTimer, 10);
        countingSince = Date.now();
    }
}

function stopHandler() {
    clearInterval(watchIntervalTimer);
    watchIntervalTimer = null;  // So we can identify that it's reset.
}

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

var seconds;
var milliseconds;
var d;
let timePassed = 0;
updateLabel();

function updateTimer() {
    timePassed += Date.now() - countingSince;
    countingSince = Date.now();
    updateLabel();
}

function updateLabel() {
    d = new Date(timePassed);
    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: 5%;
}

<h1>Stop Watch</h1>
<button id="Start">Start</button>
<button id="Stop">Stop</button>
<h3>Elapsed Time:</h3>
<p id="Time"></p>

如何使用带有 "update" 函数的事件处理程序来启动和停止秒表

How to use event handlers with "update" function to start and stop a stopwatch

html

javascript

stopwatch

button

event-handling