时间戳

首页 > 解决方案 > 在计时器结束时显示一段时间的消息

javascript - 在计时器结束时显示一段时间的消息

问题描述

我很想知道如何在计时器结束时显示一条消息一段时间（1 分钟），然后再次循环。

所需过程的示例：

谢谢你，昆汀 S。

我已经实现了计时器，但我想念的不仅仅是监视器标签被我想在从头开始进程之前放置 1 分钟的消息所取代

<div><span id="time">02:00</span></div>

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
            timer = duration;
        }
        }, 1000);
    }

    window.onload = function () {
        var twoMinutes = 60 * 2,
            display = document.querySelector('#time');
        startTimer(twoMinutes, display);
    };

标签： javascripthtmltimer

解决方案

我会通过在时间达到零后停止间隔并在一分钟后使用重新启动来做到这一点setTimeout

顺便说一句，您的代码有一个小错误，提供的回调setInterval在间隔开始时不会运行，而只会在一个间隔（在您的情况下为一秒）之后运行。我已经在这里解决了。

我还调整了时间以减少等待。

function startTimer(duration, display, pause) {
    var timer = duration, minutes, seconds;
    const updateTime = function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
            timer = duration;
            display.textContent = "wait...";
            clearInterval(intervalId);
            setTimeout(function () {
                startTimer(duration, display, pause)
            }, pause*1000)
        }
    }
    const intervalId = setInterval(updateTime, 1000);
    updateTime();
}

window.onload = function () {
    var interval = 4,
        display = document.querySelector('#time');
    startTimer(interval, display, 2);
};
<div><span id="time">XX:XX</span></div>

推荐阅读