Code for a simple JavaScript countdown timer?

问题:

I want to use a simple countdown timer starting at 30 seconds from when the function is run and ending at 0. No milliseconds. How can it be coded?

回答1:

var count=30;  var counter=setInterval(timer, 1000); //1000 will  run it every 1 second  function timer() {   count=count-1;   if (count 

To make the code for the timer appear in a paragraph (or anywhere else on the page), just put the line:

where you want the seconds to appear. Then insert the following line in your timer() function, so it looks like this:

function timer() {   count=count-1;   if (count 

回答2:

I wrote this script some time ago:

Usage:

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);   }; } 

回答3:

So far the answers seem to rely on code being run instantly. If you set a timer for 1000ms, it will actually be around 1008 instead.

Here is how you should do it:

function timer(time,update,complete) {     var start = new Date().getTime();     var interval = setInterval(function() {         var now = time-(new Date().getTime()-start);         if( now 

To use, call:

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!");     } ); 

回答4:

Here is another one if anyone needs one for minutes and seconds:

    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 

回答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); }

Countdown To January 31, 2000, at 12:00:  
 
   
Days     Hours     Minutes     Seconds     
 

回答6:

You can do as follows with pure JS. You just need to provide the function with the number of seconds and it will do the rest.

var insertZero = n => 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);

回答7:

Expanding upon the accepted answer, your machine going to sleep, etc. may delay the timer from working. You can get a true time, at the cost of a little processing. This will give a true time left.

回答8:

Based on the solution presented by @Layton Everson I developed a counter including hours, minutes and seconds:

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:

// 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); }

Countdown To January 31, 2000, at 12:00:  
 
   
Days     Hours     Minutes     Seconds     
 

文章来源: Code for a simple JavaScript countdown timer?