如何创建一个简单的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()每秒调用它

我怎么做简单(非硬编码)的方式？

Answer 1

尝试以下代码：

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 示例。

Answer 2

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

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