如何创建一个简单的 JavaScript 计时器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31559469/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a simple JavaScript timer?
提问by Bogdan M.
So, basically I am trying to create a simple JS timer that will start at 00:30, and go all the way to 00:00, and then disappear.
所以，基本上我试图创建一个简单的 JS 计时器，它将从 00:30 开始，一直到 00:00，然后消失。
I already have the HTML code :
我已经有了 HTML 代码：
<div id="safeTimer">
<h2>Safe Timer</h2>
<p id="safeTimerDisplay">00:30</p>
</div>
The element that will display the timer is obviously the paragraph. Now I know that this would be pretty easy to do if I did it the hard-coded way : I would just make a function that will change the paragraph's innerHTML ("00:30", "00:29", "00:28", etc), and then call it every second using setInterval()
显示计时器的元素显然是段落。现在我知道，如果我用硬编码的方式来做这件事会很容易：我只需要创建一个函数来改变段落的 innerHTML ("00:30", "00:29", "00:28 "等），然后使用setInterval()每秒调用一次
How would I do it the easy (not hard-coded) way?
我将如何以简单（非硬编码）的方式做到这一点？
回答by Mikhail
Declare this function and bind it to onloadevent of your page
声明此函数并将其绑定到onload页面事件
function timer(){
var sec = 30;
var timer = setInterval(function(){
document.getElementById('safeTimerDisplay').innerHTML='00:'+sec;
sec--;
if (sec < 0) {
clearInterval(timer);
}
}, 1000);
}
回答by Jayesh Goyani
Please try with the below code snippet.
请尝试使用以下代码片段。
<!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>
回答by Sotiris Kiritsis
Try the following code:
试试下面的代码：
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);
};
You can see a Jsfiddle example here.
您可以在此处查看 Jsfiddle 示例。
