一个简单的JavaScript倒数计时器的代码？

我想使用一个简单的倒数计时器，从运行函数的30秒开始，到0结束。毫秒。 如何编码？

Answer 1

var count=30; var counter=setInterval(timer, 1000); //1000 will run it every 1 second function timer() { count=count-1; if (count <= 0) { clearInterval(counter); //counter ended, do something here return; } //Do code for showing the number of seconds here } 

要使计时器的代码出现在段落（或页面上的任何其他位置），只需放置一行：

 <span id="timer"></span> 

在哪里你想要秒出现。 然后在你的timer()函数中插入下面一行，看起来像这样：

 function timer() { count=count-1; if (count <= 0) { clearInterval(counter); return; } document.getElementById("timer").innerHTML=count + " secs"; // watch for spelling } 

Answer 2

前段时间我写了这个脚本：

用法：

 var myCounter = new Countdown({ seconds:5, // number of seconds to count down onUpdateStatus: function(sec){console.log(sec);}, // callback for each second onCounterEnd: function(){ alert('counter ended!');} // final action }); myCounter.start(); 

---

 function Countdown(options) { var timer, instance = this, seconds = options.seconds || 10, updateStatus = options.onUpdateStatus || function () {}, counterEnd = options.onCounterEnd || function () {}; function decrementCounter() { updateStatus(seconds); if (seconds === 0) { counterEnd(); instance.stop(); } seconds--; } this.start = function () { clearInterval(timer); timer = 0; seconds = options.seconds; timer = setInterval(decrementCounter, 1000); }; this.stop = function () { clearInterval(timer); }; } 

Answer 3

到目前为止，答案似乎依赖于即时运行的代码。 如果你设置一个1000ms的定时器，它实际上会在1008左右。

这是你应该怎么做的：

 function timer(time,update,complete) { var start = new Date().getTime(); var interval = setInterval(function() { var now = time-(new Date().getTime()-start); if( now <= 0) { clearInterval(interval); complete(); } else update(Math.floor(now/1000)); },100); // the smaller this number, the more accurate the timer will be } 

要使用，请拨打：

 timer( 5000, // milliseconds function(timeleft) { // called every step to update the visible countdown document.getElementById('timer').innerHTML = timeleft+" second(s)"; }, function() { // what to do after alert("Timer complete!"); } ); 

Answer 4

如果任何人需要分钟和秒钟，这是另一个：

  var mins = 10; //Set the number of minutes you need var secs = mins * 60; var currentSeconds = 0; var currentMinutes = 0; /* * The following line has been commented out due to a suggestion left in the comments. The line below it has not been tested. * setTimeout('Decrement()',1000); */ setTimeout(Decrement,1000); function Decrement() { currentMinutes = Math.floor(secs / 60); currentSeconds = secs % 60; if(currentSeconds <= 9) currentSeconds = "0" + currentSeconds; secs--; document.getElementById("timerText").innerHTML = currentMinutes + ":" + currentSeconds; //Set the element id you need the time put into. if(secs !== -1) setTimeout('Decrement()',1000); } 

Answer 5

 // Javascript Countdown // Version 1.01 6/7/07 (1/20/2000) // by TDavid at http://www.tdscripts.com/ var now = new Date(); var theevent = new Date("Sep 29 2007 00:00:01"); var seconds = (theevent - now) / 1000; var minutes = seconds / 60; var hours = minutes / 60; var days = hours / 24; ID = window.setTimeout("update();", 1000); function update() { now = new Date(); seconds = (theevent - now) / 1000; seconds = Math.round(seconds); minutes = seconds / 60; minutes = Math.round(minutes); hours = minutes / 60; hours = Math.round(hours); days = hours / 24; days = Math.round(days); document.form1.days.value = days; document.form1.hours.value = hours; document.form1.minutes.value = minutes; document.form1.seconds.value = seconds; ID = window.setTimeout("update();", 1000); } 

 <p><font face="Arial" size="3">Countdown To January 31, 2000, at 12:00: </font> </p> <form name="form1"> <p>Days <input type="text" name="days" value="0" size="3">Hours <input type="text" name="hours" value="0" size="4">Minutes <input type="text" name="minutes" value="0" size="7">Seconds <input type="text" name="seconds" value="0" size="7"> </p> </form> 

Answer 6

你可以用纯JS做如下的事情。 您只需要提供秒数的function，剩下的就完成了。

 var insertZero = n => n < 10 ? "0"+n : ""+n, displayTime = n => n ? time.textContent = insertZero(~~(n/3600)%3600) + ":" + insertZero(~~(n/60)%60) + ":" + insertZero(n%60) : time.textContent = "IGNITION..!", countDownFrom = n => (displayTime(n), setTimeout(_ => n ? sid = countDownFrom(--n) : displayTime(n), 1000)), sid; countDownFrom(3610); setTimeout(_ => clearTimeout(sid),20005); 

 <div id="time"></div> 

Answer 7

在接受的答案上展开，你的机器进入睡眠状态等可能会延迟计时器的工作。 你可以得到一个真正的时间，代价是一点点处理。 这会留下真实的时间。

 <span id="timer"></span> <script> var now = new Date(); var timeup = now.setSeconds(now.getSeconds() + 30); //var timeup = now.setHours(now.getHours() + 1); var counter = setInterval(timer, 1000); function timer() { now = new Date(); count = Math.round((timeup - now)/1000); if (now > timeup) { window.location = "/logout"; //or somethin' clearInterval(counter); return; } var seconds = Math.floor((count%60)); var minutes = Math.floor((count/60) % 60); document.getElementById("timer").innerHTML = minutes + ":" + seconds; } </script> 

Answer 8

基于@Layton Everson提出的解决scheme，我开发了一个包括小时，分钟和秒钟的计数器：

 var initialSecs = 86400; var currentSecs = initialSecs; setTimeout(decrement,1000); function decrement() { var displayedSecs = currentSecs % 60; var displayedMin = Math.floor(currentSecs / 60) % 60; var displayedHrs = Math.floor(currentSecs / 60 /60); if(displayedMin <= 9) displayedMin = "0" + displayedMin; if(displayedSecs <= 9) displayedSecs = "0" + displayedSecs; currentSecs--; document.getElementById("timerText").innerHTML = displayedHrs + ":" + displayedMin + ":" + displayedSecs; if(currentSecs !== -1) setTimeout(decrement,1000); } 

Answer 9

 // Javascript Countdown // Version 1.01 6/7/07 (1/20/2000) // by TDavid at http://www.tdscripts.com/ var now = new Date(); var theevent = new Date("Nov 13 2017 22:05:01"); var seconds = (theevent - now) / 1000; var minutes = seconds / 60; var hours = minutes / 60; var days = hours / 24; ID = window.setTimeout("update();", 1000); function update() { now = new Date(); seconds = (theevent - now) / 1000; seconds = Math.round(seconds); minutes = seconds / 60; minutes = Math.round(minutes); hours = minutes / 60; hours = Math.round(hours); days = hours / 24; days = Math.round(days); document.form1.days.value = days; document.form1.hours.value = hours; document.form1.minutes.value = minutes; document.form1.seconds.value = seconds; ID = window.setTimeout("update();", 1000); } 

 <p><font face="Arial" size="3">Countdown To January 31, 2000, at 12:00: </font> </p> <form name="form1"> <p>Days <input type="text" name="days" value="0" size="3">Hours <input type="text" name="hours" value="0" size="4">Minutes <input type="text" name="minutes" value="0" size="7">Seconds <input type="text" name="seconds" value="0" size="7"> </p> </form>