如何使用具有“更新”功能的事件处理程序来启动和停止秒表

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

好吧，我要做的只是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>