The simplest possible JavaScript countdown timer

Question

Just wanted to ask how to create the simplest possible countdown timer   There ll be a sentence on the site saying        Registration closes in 05 00 minutes     So  what I want to do is to create a simple js countdown timer that goes from  05 00  to  00 00  and then resets to  05 00  once it ends   I was going through some answers before  but they all seem too intense  Date objects  etc   for what I want to do

User · Answer

If you want a real timer you need to use the date object.

Calculate the difference.

Format your string.

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

Example

Jsfiddle

not so precise timer

var time=5*60,r=document.getElementById('r'),tmp=time;

setInterval(function(){
    var c=tmp--,m=(c/60)>>0,s=(c-m*60)+'';
    r.textContent='Registration closes in '+m+':'+(s.length>1?'':'0')+s
    tmp!=0||(tmp=time);
},1000);

JsFiddle

User · Answer

You can easily create a timer functionality by using setInterval Below is the code which you can use it to create the timer   http   jsfiddle net ayyadurai GXzhZ 1    x000D   x000D  window onload   function     x000D    var minute   5  x000D    var sec   60  x000D    setInterval function     x000D      document getElementById  timer   innerHTML   minute           sec  x000D      sec--  x000D      if  sec    00    x000D        minute --  x000D        sec   60  x000D        if  minute    0    x000D          minute   5  x000D          x000D        x000D       1000   x000D    x000D  Registration closes in  lt span id  timer  gt 05 00 lt span gt  minutes  x000D   x000D   x000D

User · Answer

I have two demos  one with jQuery and one without  Neither use date functions and are about as simple as it gets   Demo with vanilla JavaScript   x000D   x000D  function startTimer duration  display    x000D      var timer   duration  minutes  seconds  x000D      setInterval function      x000D          minutes   parseInt timer   60  10   x000D          seconds   parseInt timer   60  10   x000D   x000D          minutes   minutes  lt  10    0    minutes   minutes  x000D          seconds   seconds  lt  10    0    seconds   seconds  x000D   x000D          display textContent   minutes         seconds  x000D   x000D          if  --timer  lt  0    x000D              timer   duration  x000D            x000D         1000   x000D    x000D   x000D  window onload   function      x000D      var fiveMinutes   60   5  x000D          display   document querySelector   time    x000D      startTimer fiveMinutes  display   x000D     x000D   lt body gt  x000D       lt div gt Registration closes in  lt span id  time  gt 05 00 lt  span gt  minutes  lt  div gt  x000D   lt  body gt  x000D   x000D   x000D    Demo with jQuery     function startTimer duration  display        var timer   duration  minutes  seconds      setInterval function              minutes   parseInt timer   60  10           seconds   parseInt timer   60  10            minutes   minutes  lt  10    0    minutes   minutes          seconds   seconds  lt  10    0    seconds   seconds           display text minutes         seconds            if  --timer  lt  0                timer   duration                   1000      jQuery function           var fiveMinutes   60   5          display       time        startTimer fiveMinutes  display         However if you want a more accurate timer that is only slightly more complicated    x000D   x000D  function startTimer duration  display    x000D      var start   Date now    x000D          diff  x000D          minutes  x000D          seconds  x000D      function timer     x000D             get the number of seconds that have elapsed since  x000D             startTimer   was called x000D          diff   duration -    Date now   - start    1000    0   x000D   x000D             does the same job as parseInt truncates the float x000D          minutes    diff   60    0  x000D          seconds    diff   60    0  x000D   x000D          minutes   minutes  lt  10    0    minutes   minutes  x000D          seconds   seconds  lt  10    0    seconds   seconds  x000D   x000D          display textContent   minutes         seconds   x000D   x000D          if  diff  lt   0    x000D                 add one second so that the count down starts at the full duration x000D                 example 05 00 not 04 59 x000D              start   Date now     1000  x000D            x000D         x000D         we don t want to wait a full second before the timer starts x000D      timer    x000D      setInterval timer  1000   x000D    x000D   x000D  window onload   function      x000D      var fiveMinutes   60   5  x000D          display   document querySelector   time    x000D      startTimer fiveMinutes  display   x000D     x000D   lt body gt  x000D       lt div gt Registration closes in  lt span id  time  gt  lt  span gt  minutes  lt  div gt  x000D   lt  body gt  x000D   x000D   x000D    Now that we have made a few pretty simple timers we can start to think about re-usability and separating concerns  We can do this by asking  what should a count down timer do     Should a count down timer count down  Yes  Should a count down timer know how to display itself on the DOM  No   Should a count down timer know to restart itself when it reaches 0  No  Should a count down timer provide a way for a client to access how much time is left  Yes   So with these things in mind lets write a better  but still very simple  CountDownTimer  function CountDownTimer duration  granularity      this duration   duration    this granularity   granularity    1000    this tickFtns         this running   false     CountDownTimer prototype start   function       if  this running        return        this running   true    var start   Date now          that   this        diff  obj      function timer         diff   that duration -    Date now   - start    1000    0        if  diff  gt  0          setTimeout timer  that granularity         else         diff   0        that running   false             obj   CountDownTimer parse diff       that tickFtns forEach function ftn          ftn call this  obj minutes  obj seconds          that               CountDownTimer prototype onTick   function ftn      if  typeof ftn      function         this tickFtns push ftn         return this      CountDownTimer prototype expired   function       return  this running      CountDownTimer parse   function seconds      return        minutes    seconds   60    0       seconds    seconds   60    0           So why is this implementation better than the others  Here are some examples of what you can do with it  Note that all but the first example can t be achieved by the startTimer functions   An example that displays the time in XX XX format and restarts after reaching 00 00  An example that displays the time in two different formats  An example that has two different timers and only one restarts  An example that starts the count down timer when a button is pressed

[javascript] The simplest possible JavaScript countdown timer?

Jsfiddle

JsFiddle

Examples related to javascript

Examples related to timer

Examples related to countdown

Examples related to countdowntimer