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 <= 0)
  {
     clearInterval(counter);
     //counter ended, do something here
     return;
  }

  //Do code for showing the number of seconds here
}

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

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

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 <= 0)
  {
     clearInterval(counter);
     return;
  }

 document.getElementById(\"timer\").innerHTML=count + \" secs\"; // watch for spelling
}

回答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 <= 0) {
            clearInterval(interval);
            complete();
        }
        else update(Math.floor(now/1000));
    },100); // the smaller this number, the more accurate the timer will be
}

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

回答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>

回答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 < 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>

回答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.

<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>

回答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) displayedMin = \"0\" + displayedMin;
    if(displayedSecs <= 9) displayedSecs = \"0\" + displayedSecs;
    currentSecs--;
    document.getElementById(\"timerText\").innerHTML = displayedHrs + \":\" + displayedMin + \":\" + displayedSecs;
    if(currentSecs !== -1) setTimeout(decrement,1000);
}

回答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>

回答10:

My solution works with MySQL date time formats and provides a callback function. on complition. Disclaimer: works only with minutes and seconds, as this is what I needed.

jQuery.fn.countDownTimer = function(futureDate, callback){
    if(!futureDate){
        throw \'Invalid date!\';
    }

    var currentTs = +new Date();
    var futureDateTs = +new Date(futureDate);

    if(futureDateTs <= currentTs){
        throw \'Invalid date!\';
    }


    var diff = Math.round((futureDateTs - currentTs) / 1000);
    var that = this;

    (function countdownLoop(){
        // Get hours/minutes from timestamp
        var m = Math.floor(diff % 3600 / 60);
        var s = Math.floor(diff % 3600 % 60);
        var text = zeroPad(m, 2) + \':\' + zeroPad(s, 2);

        $(that).text(text);

        if(diff <= 0){
            typeof callback === \'function\' ? callback.call(that) : void(0);
            return;
        }

        diff--;
        setTimeout(countdownLoop, 1000);
    })();

    function zeroPad(num, places) {
      var zero = places - num.toString().length + 1;
      return Array(+(zero > 0 && zero)).join(\"0\") + num;
    }
}

// $(\'.heading\').countDownTimer(\'2018-04-02 16:00:59\', function(){ // on complete})

回答11:

Just modified @ClickUpvote\'s answer:

You can use IIFE (Immediately Invoked Function Expression) and recursion to make it a little bit more easier:

var i = 5;  //set the countdown
(function timer(){
    if (--i < 0) return;
    setTimeout(function(){
        console.log(i + \' secs\');  //do stuff here
        timer();
    }, 1000);
})();

var i = 5;
(function timer(){
    if (--i < 0) return;
    setTimeout(function(){
        document.getElementsByTagName(\'h1\')[0].innerHTML = i + \' secs\';
        timer();
    }, 1000);
})();

<h1>5 secs</h1>