如何将事件处理程序与"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

如果您想减去时间，这就是您可以做的。

1. 开始时，写下当前时间。
2. 在更新中，查看自上次写下来以来已经过去了多少时间，将其添加到总时间，再次写下当前时间。
3. 停止，停止更新计时器。

剧透：

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>

Answer 2

好吧，如果尚未设置" start"，我要做的只是setInterval；和"停止"上的clearInterval。剧透：

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>