在简单的时间跟踪器的 js 代码中停止时，计时器无法正确重置

问题描述 投票：0回答：1

我正在开发一个简单的时间跟踪器项目，并且编写了以下 JavaScript 代码。目标是跟踪经过的时间，并提供启动和停止计时器的选项。

<!DOCTYPE html>
<html>
<head>
    <title>Simple Time Tracker</title>
</head>
<body>
    <div>
        <h1>Simple Time Tracker</h1>
        <button id="start-button">Start</button>
        <button id="stop-button">Stop</button>
        <p>Elapsed Time: <span id="elapsed-time">0</span> seconds</p>
    </div>

    <script>
        let startTime;
        let elapsedTime = 0;
        let timerInterval;

        function startTimer() {
            startTime = Date.now() - elapsedTime;
            timerInterval = setInterval(() => {
                elapsedTime = Date.now() - startTime;
                document.getElementById('elapsed-time').textContent = (elapsedTime / 1000).toFixed(1);
            }, 100);
        }

        function stopTimer() {
            clearInterval(timerInterval);
        }

        document.getElementById('start-button').addEventListener('click', startTimer);
        document.getElementById('stop-button').addEventListener('click', stopTimer);
    </script>
</body>
</html>

我一直在使用 Traqq 作为我的项目的示例。但是，我遇到了一个问题，即停止然后重新启动时计时器无法正确重置。我总是得到累计时间而不是重置为零。

有人知道如何正确重置计时器，使其每次都从零开始吗？对我当前方法的任何建议或改进将不胜感激。

我添加了一个额外的按钮来重置计时器，并尝试在调用 

elapsedTime
函数时将 
0
重置为 
stopTimer
。然而，这并没有达到预期的效果。具体来说，我补充道：

重置

javascript
1个回答
0
投票

您需要将 

elapsedTime
重置回 
0
并更新 DOM，然后才能再次开始计时。

添加了一个更新 DOM 的函数，以便我们可以在启动+更新时调用它。

let startTime;
let elapsedTime = 0;
let timerInterval;

function startTimer() {
    // rest
    elapsedTime = 0;
    updateTime(elapsedTime);
    
    // start
    startTime = Date.now() - elapsedTime;
    timerInterval = setInterval(() => {
        elapsedTime = Date.now() - startTime;
        updateTime(elapsedTime);
    }, 100);
}

function updateTime(newTime) {
  document.getElementById('elapsed-time').textContent = (newTime / 1000).toFixed(1);
}

function stopTimer() {
    clearInterval(timerInterval);
}

document.getElementById('start-button').addEventListener('click', startTimer);
document.getElementById('stop-button').addEventListener('click', stopTimer);
<div>
    <h1>Simple Time Tracker</h1>
    <button id="start-button">Start</button>
    <button id="stop-button">Stop</button>
    <p>Elapsed Time: <span id="elapsed-time">0</span> seconds</p>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.