如何用javascript创建倒数计时器
问题描述:
我需要一个25分钟的计时器,计数到0为止。我发现很多教程,但是我找到的每个教程都没有解释。如何用javascript创建倒数计时器
这是我发现最有用的链接。有人可以解释它是如何工作的? The simplest possible JavaScript countdown timer?
编辑:我不想复制&粘贴代码。我想了解它。
答
基于这个问题的答案,这是你在找什么:
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() {
//this is where you can modifies the time amount.
var twentyfiveminutes = 60 * 25,
display = document.querySelector('#time');
startTimer(twentyfiveminutes, display);
};
<body>
<div>Registration closes in <span id="time">25:00</span> minutes!</div>
</body>
所以知道更多的人是如何创造了这个代码做了下面的步骤:
- 一个函数
startTimer(duration, display)
这个函数首先获取两个参数的时间和分钟的html元素的输出。 - 使用
setInterval()
他每隔一秒重复一次函数。 - 然后他初始树变量
timer = duration
和minutes = duration/60
和seconds = duration%60
。 - 然后他检查分钟或秒的值是否大于10.如果不是,则加零。
- 最后他花了一秒钟的时间,并检查它的值是否大于0,否则返回到第一个状态。
- 他重复说,直到时间的价值是0;
请参阅帮助中心的[问](https://stackoverflow.com/help/asking)。 –
[JavaScript Referemce(MDN)](https://developer.mozilla.org/en-US/docs/Web/javascript) –