最简单的JavaScript倒数计时器?

只是想问如何创建最简单的倒数计时器。

网站上会有一句话说:

“注册在05:00分钟关闭!”

所以,我想要做的是创建一个简单的从“05:00”到“00:00”的js倒数计时器,一旦结束就重置为“05:00”。

我之前正在通过一些答案,但是他们都似乎太强烈(日期对象等),我想要做什么。

我有两个演示,一个与jQuery和一个没有。 既不使用日期函数,也非常简单。

演示与香草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> 

如果你想要一个真正的计时器,你需要使用日期对象。

计算差异。

格式化你的字符串

 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=(cm*60)+''; r.textContent='Registration closes in '+m+':'+(s.length>1?'':'0')+s tmp!=0||(tmp=time); },1000); 

的jsfiddle

您可以使用setInterval轻松创建计时器功能。下面是您可以使用它创建计时器的代码。

http://jsfiddle.net/ayyadurai/GXzhZ/1/

  <div> Registration closes in <span id="timer">05:00<span> minutes! </div> <script> window.onload = function(){ var hou = 2; var sec = 60; setInterval(function(){ document.getElementById("timer").innerHTML = hou +" : " + sec ; sec--; if(sec == 00) { hou--; sec = 60; if (hou == 0) { hou = 2; } } },500); } </script>