0

我正在编写一个简单秒表的代码。对我来说最后一个障碍是将时间重置为零。函数 resetTimer 是我尝试实现代码的地方。所以网页会显示一个带有计时器和三个按钮的页面；停止、启动和重置。当用户单击重置按钮时，计时器应该重置为零。我一直在尝试使它工作时遇到麻烦。任何帮助/想法都会很重要。我希望我说清楚了。我再次尝试将计时器重置为 00:00:00

window.onload = function () {
    //grab possible elements needed
    const timerEl = document.getElementById("timer-text")
    const startBtn = document.getElementById("start")
    const restartBtn = document.getElementById("restart");
    const stopBtn = document.getElementById('stop');

    //hold variables of time and set to 0
    let hours = parseInt('0');
    let minutes = parseInt('0');
    let seconds = parseInt('0');
    let time;

    function makeTwoNumbers(num) {
        if (num < 10) {
            return "0" + num
        }
        return num
    }
    
    //timer
    let timer = () => {
        seconds++
        //console.log(seconds)
        if (seconds == 60) {
            minutes++
            seconds = 0;
            hours = 0
        }
        if (minutes == 60) {
            hours++
            minutes = 0;
            hours = 0;
        }
        timerEl.textContent = makeTwoNumbers(hours)+ ": " + makeTwoNumbers(minutes) + ": " + makeTwoNumbers(seconds);
    }
    
    let runTheClock;
    
    //timer is running
    function runTimer() {
        runTheClock = setInterval(timer, 20);;
    }
    
    function stopTimer() {
        clearInterval(runTheClock)
    }
    
    //function will reset timer
    function resetTimer() {
        time--;
        timerEl.textContent;
        if (time === 0) {
            stopTimer();
            time = 0
        }
    }
    
    restartBtn.addEventListener("click", function () {
        resetTimer();
    })

    //button will pause the timer
    stopBtn.addEventListener("click", function () {
        stopTimer();
    })

    //button will start the timer
    startBtn.addEventListener("click", function () {
        runTimer();
    })


}
4

2 回答 2

0

我意识到您可以简单地将秒、小时和分钟重置为 0 并使用变量 true。这会将它完全重置为 0。我无法相信它是多么简单

于 2021-02-23T13:11:54.753 回答
0

这是一个固定的和稍微重构的版本。

<html>
    <body>
        <div id="timer-text"></div>
        <button id="start">start</button>
        <button id="restart">restart</button>
        <button id="stop">stop</button>
    </body>
    <script>
    const timerEl = document.getElementById("timer-text")
    const startBtn = document.getElementById("start")
    const restartBtn = document.getElementById("restart");
    const stopBtn = document.getElementById('stop');

    let runTheClock;
    let seconds = 0;
    render(seconds);

    function makeTwoNumbers(num) {
        return ((num < 10) ? "0" : "") + num;
    }

    function tick() {
        seconds++;
        render(seconds);
    }
    
    function render(secs) {

        const hours = Math.floor(secs / 3600);
        const minutes = Math.floor(secs / 60) - (hours * 60);
        const seconds = secs % 60;

        const val = [hours, minutes, seconds].map(makeTwoNumbers).join(":");
        console.log(val);
        timerEl.textContent = val;
    }
    
    function runTimer() {
        runTheClock = setInterval(tick, 1000);
    }
    
    function stopTimer() {
        clearInterval(runTheClock)
    }
    
    function resetTimer() {
        seconds = 0;
        render(seconds);
    }
    
    restartBtn.addEventListener("click", resetTimer);
    stopBtn.addEventListener("click", stopTimer);
    startBtn.addEventListener("click", runTimer);

    </script>
</html>

在重置函数中，它只是将秒数设置回 0 并设置textContent值，使其显示在页面上。我将时间的计算和绘制分离到一个render函数中，以便在需要重新渲染时可以重复使用。

解释渲染函数。

我们只需要将秒数存储为周期性函数调用之间的持久变量。我们可以从中得出小时和分钟。这使得它比尝试增加小时和分钟更不容易出错。

要计算小时，我们只需将秒除以 3600（或 60 x 60 一小时的秒数）并向下取整。

要计算分钟，我们可以计算总分钟数（秒/60 并向下取整），然后减去我们计算的小时值中的分钟数（小时 * 60）。

对于几秒钟，我们使用模数，或者%这只是余数的一个花哨的词。所以seconds % 60给了我们 的余值seconds / 60。例如 61 % 60 = 1。这不是计算这些值的唯一方法。

构建显示字符串。我只是把所有的小时、分钟和秒放在一个数组中。然后使用该map方法，该方法将函数makeTwoNumbers应用于所有值。然后我使用该join方法使用 delimiter 连接所有字符串:。它只是节省了一些输入，并且意味着您只引用makeTwoNumbers一次，如果您愿意，以后使用不同的功能可以减少工作量。

希望有帮助。

于 2021-02-14T07:53:53.720 回答