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

声明此功能并将其绑定到页面的onload事件

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

Answer 2

请尝试使用以下代码段。

<!DOCTYPE html>
<html>
<body>

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

<script>
var myVar = setInterval(function(){ myTimer() }, 1000);
var secondlimit = 30;

function myTimer() {
if(secondlimit == 0)
{
    myStopFunction();
}

document.getElementById("safeTimerDisplay").innerHTML = '00:' + zeroPad(secondlimit,2);
secondlimit = secondlimit  - 1;

}

function myStopFunction() {
    clearInterval(myVar);
}

function zeroPad(num, places) {
  var zero = places - num.toString().length + 1;
  return Array(+(zero > 0 && zero)).join("0") + num;
}

</script>

</body>
</html>

Answer 3

请尝试以下代码：

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

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

3 个答案: