如何在 JavaScript 中编写倒数计时器？ [关闭]
Posted
技术标签:
【中文标题】如何在 JavaScript 中编写倒数计时器？ [关闭]【英文标题】：How to write a countdown timer in JavaScript? [closed] 【发布时间】：2014-01-04 06:46:58 【问题描述】：只是想问一下如何创建最简单的倒数计时器。
网站上会有一句话说：
“注册将在 05:00 分钟后结束！”
所以，我想做的是创建一个简单的 js 倒计时计时器，它从“05:00”到“00:00”，然后在结束后重置为“05:00”。
我之前浏览过一些答案，但对于我想做的事情来说，它们似乎都太紧张了（日期对象等）。
【问题讨论】：
再一次，您忽略了相关的 html，但至少这次您已经解释了复杂性问题。但说真的，您需要自己研究解决方案，然后然后来向我们询问您遇到的问题。 抱怨太复杂的代码示例？无论如何，我认为您可以轻松地setInterval 并使其基于 .innerHTML，而不是基于日期。
是的，人们应该自己寻找解决方案。但是使用 javascript 有很多执行常见任务的示例。我知道如何做一个倒数计时器，但我更喜欢在网络上找到一个（比如一个组件）。所以多亏了这个问题和广泛的答案，我找到了我想要的东西。倒计时逻辑
我发现这些解决方案更简单：***.com/questions/32141035/…
看这个：sitepoint.com/build-javascript-countdown-timer-no-dependencies
【参考方案1】：
我有两个演示，一个带有jQuery，一个没有。既不使用日期函数，也尽可能简单。
Demo with vanilla JavaScript
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 ()
var fiveMinutes = 60 * 5,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
;<body>
<div>Registration closes in <span id="time">05:00</span> minutes!</div>
</body>Demo with jQuery
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.text(minutes + ":" + seconds);
if (--timer < 0)
timer = duration;
, 1000);
jQuery(function ($)
var fiveMinutes = 60 * 5,
display = $('#time');
startTimer(fiveMinutes, display);
);
但是，如果您想要一个更精确但稍微复杂一点的计时器：
function startTimer(duration, display)
var start = Date.now(),
diff,
minutes,
seconds;
function timer()
// get the number of seconds that have elapsed since
// startTimer() was called
diff = duration - (((Date.now() - start) / 1000) | 0);
// does the same job as parseInt truncates the float
minutes = (diff / 60) | 0;
seconds = (diff % 60) | 0;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (diff <= 0)
// add one second so that the count down starts at the full duration
// example 05:00 not 04:59
start = Date.now() + 1000;
;
// we don't want to wait a full second before the timer starts
timer();
setInterval(timer, 1000);
window.onload = function ()
var fiveMinutes = 60 * 5,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
;<body>
<div>Registration closes in <span id="time"></span> minutes!</div>
</body>现在我们已经制作了一些非常简单的计时器，我们可以开始考虑可重用性和分离关注点。我们可以通过询问“倒计时计时器应该做什么？”来做到这一点
倒计时计时器应该倒计时吗？ 是的 倒计时计时器是否应该知道如何在 DOM 上显示自己？ 没有 倒计时计时器是否应该知道在达到 0 时重新启动？ 没有 倒计时计时器是否应该为客户提供一种访问剩余时间的方法？ 是的考虑到这些，让我们写一个更好的（但仍然非常简单）CountDownTimer
function CountDownTimer(duration, granularity)
this.duration = duration;
this.granularity = granularity || 1000;
this.tickFtns = [];
this.running = false;
CountDownTimer.prototype.start = function()
if (this.running)
return;
this.running = true;
var start = Date.now(),
that = this,
diff, obj;
(function timer()
diff = that.duration - (((Date.now() - start) / 1000) | 0);
if (diff > 0)
setTimeout(timer, that.granularity);
else
diff = 0;
that.running = false;
obj = CountDownTimer.parse(diff);
that.tickFtns.forEach(function(ftn)
ftn.call(this, obj.minutes, obj.seconds);
, that);
());
;
CountDownTimer.prototype.onTick = function(ftn)
if (typeof ftn === 'function')
this.tickFtns.push(ftn);
return this;
;
CountDownTimer.prototype.expired = function()
return !this.running;
;
CountDownTimer.parse = function(seconds)
return
'minutes': (seconds / 60) | 0,
'seconds': (seconds % 60) | 0
;
;
那么为什么这个实现比其他实现更好？这里有一些你可以用它做什么的例子。请注意，除了第一个示例之外的所有示例都无法通过 startTimer 函数实现。
An example that displays the time in XX:XX format and restarts after reaching 00:00
An example that displays the time in two different formats
An example that has two different timers and only one restarts
An example that starts the count down timer when a button is pressed
【讨论】：
你就是那个男人！这正是我一直在寻找的。谢谢！还有一件事：如何在分钟前添加“0”，使其显示“04:59”，而不是“4:59”？minutes = minutes < 10 ? "0" + minutes : minutes;
@timbram 一开始我也觉得很奇怪，直到我意识到var 声明后的逗号分隔不同的声明。所以minutes 和seconds 只是声明（但未初始化）变量。所以timer 就等于duration 参数，仅此而已。
@SinanErdem 我已经写了一些代码来做到这一点。我可以在今天晚些时候将该代码添加到答案中。完成后我会 ping 你。
如何添加重置选项？还有暂停和恢复？我尝试添加一个字段 this.reset，并在闭包中检查它。但时钟仍在继续。【参考方案2】：
您可以使用 setInterval 轻松创建计时器功能。下面是您可以使用它来创建计时器的代码。
http://jsfiddle.net/ayyadurai/GXzhZ/1/
window.onload = function()
var minute = 5;
var sec = 60;
setInterval(function()
document.getElementById("timer").innerHTML = minute + " : " + sec;
sec--;
if (sec == 00)
minute --;
sec = 60;
if (minute == 0)
minute = 5;
, 1000);
Registration closes in <span id="timer">05:00<span> minutes!【讨论】：
不能准确表示每一秒，倒计时太快了。 将 500 更改为 1000 似乎使其准确。 光滑的解决方案，小时应改为分钟，以避免混淆【参考方案3】：如果你想要一个真正的计时器，你需要使用日期对象。
计算差异。
格式化你的字符串。
window.onload=function()
var start=Date.now(),r=document.getElementById('r');
(function f()
var diff=Date.now()-start,ns=(((3e5-diff)/1e3)>>0),m=(ns/60)>>0,s=ns-m*60;
r.textContent="Registration closes in "+m+':'+((''+s).length>1?'':'0')+s;
if(diff>3e5)
start=Date.now()
setTimeout(f,1e3);
)();
示例
Jsfiddle
不是那么精确的计时器
var time=5*60,r=document.getElementById('r'),tmp=time;
setInterval(function()
var c=tmp--,m=(c/60)>>0,s=(c-m*60)+'';
r.textContent='Registration closes in '+m+':'+(s.length>1?'':'0')+s
tmp!=0||(tmp=time);
,1000);
JsFiddle
【讨论】：
以上是关于如何在 JavaScript 中编写倒数计时器？ [关闭]的主要内容，如果未能解决你的问题，请参考以下文章