[jquery] 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?

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>

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

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

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

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

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

For the sake of performances, we can now safely use requestAnimationFrame for fast looping, instead of setInterval/setTimeout.

When using setInterval/setTimeout, if a loop task is taking more time than the interval, the browser will simply extend the interval loop, to continue the full rendering. This is creating issues. After minutes of setInterval/setTimeout overload, this can freeze the tab, the browser or the whole computer.

Internet devices have a wide range of performances, so it's quite impossible to hardcode a fixed interval time in milliseconds!

Using the Date object, to compare the start Date Epoch and the current. This is way faster than everything else, the browser will take care of everything, at a steady 60FPS (1000 / 60 = 16.66ms by frame) -a quarter of an eye blink- and if the task in the loop is requiring more than that, the browser will drop some repaints.

This allow a margin before our eyes are noticing (Human = 24FPS => 1000 / 24 = 41.66ms by frame = fluid animation!)

https://caniuse.com/#search=requestAnimationFrame

/* Seconds to (STRING)HH:MM:SS.MS ------------------------*/_x000D_
/* This time format is compatible with FFMPEG ------------*/_x000D_
function secToTimer(sec){_x000D_
  const o = new Date(0), p =  new Date(sec * 1000)_x000D_
  return new Date(p.getTime()-o.getTime()).toString().split(" ")[4] + "." + p.getMilliseconds()_x000D_
}_x000D_
_x000D_
/* Countdown loop ----------------------------------------*/_x000D_
let job, origin = new Date().getTime()_x000D_
const timer = () => {_x000D_
  job = requestAnimationFrame(timer)_x000D_
  OUT.textContent = secToTimer((new Date().getTime() - origin) / 1000)_x000D_
}_x000D_
_x000D_
/* Start looping -----------------------------------------*/_x000D_
requestAnimationFrame(timer)_x000D_
_x000D_
/* Stop looping ------------------------------------------*/_x000D_
// cancelAnimationFrame(job)_x000D_
_x000D_
/* Reset the start date ----------------------------------*/_x000D_
// origin = new Date().getTime()

span {font-size:4rem}

<span id="OUT"></span>_x000D_
<br>_x000D_
<button onclick="origin = new Date().getTime()">RESET</button>_x000D_
<button onclick="requestAnimationFrame(timer)">RESTART</button>_x000D_
<button onclick="cancelAnimationFrame(job)">STOP</button>

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;_x000D_
(function timer(){_x000D_
    if (--i < 0) return;_x000D_
    setTimeout(function(){_x000D_
        document.getElementsByTagName('h1')[0].innerHTML = i + ' secs';_x000D_
        timer();_x000D_
    }, 1000);_x000D_
})();

<h1>5 secs</h1>

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,_x000D_
   displayTime = n => n ? time.textContent = insertZero(~~(n/3600)%3600) + ":" +_x000D_
                                             insertZero(~~(n/60)%60) + ":" +_x000D_
                                             insertZero(n%60)_x000D_
                        : time.textContent = "IGNITION..!",_x000D_
 countDownFrom = n => (displayTime(n), setTimeout(_ => n ? sid = countDownFrom(--n)_x000D_
                                                         : displayTime(n), 1000)),_x000D_
           sid;_x000D_
countDownFrom(3610);_x000D_
setTimeout(_ => clearTimeout(sid),20005);

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