最简单的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>
