如何创建一个简单的 JavaScript 计时器？

Question

所以，基本上我正在尝试创建一个简单的 JS 计时器，它将从 00:30 开始，一直到 00:00，然后消失。

我已经有了 HTML 代码：

 <div id="safeTimer">
<h2>Safe Timer</h2>
<p id="safeTimerDisplay">00:30</p>
</div>

显示计时器的元素显然是段落。现在我知道如果我以硬编码的方式做到这一点会很容易：我只需要创建一个函数来更改段落的 innerHTML (“00:30”, “00:29”, “00:28 ” 等），然后使用 setInterval() 每秒调用一次

我将如何以简单（不是硬编码）的方式做到这一点？

原文由 bool3max 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

声明此函数并将其绑定到页面的 onload 事件

function timer(){
    var sec = 30;
    var timer = setInterval(function(){
        document.getElementById('safeTimerDisplay').innerHTML='00:'+sec;
        sec--;
        if (sec < 0) {
            clearInterval(timer);
        }
    }, 1000);
}

原文由 Mikhail 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

试试下面的代码：

 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 = 0;
            // timer = duration; // uncomment this line to reset timer automatically after reaching 0
        }
    }, 1000);
}

window.onload = function () {
    var time = 60 / 2, // your time in seconds here
        display = document.querySelector('#safeTimerDisplay');
    startTimer(time, display);
};

您可以 在此处 查看 Jsfiddle 示例。

原文由 Sotiris Kiritsis 发布，翻译遵循 CC BY-SA 3.0 许可协议