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

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_

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 <span id="timer">05:00<span> minutes!

_x000D_

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  gt  gt 0  m  ns 60  gt  gt 0 s ns-m 60        r textContent  Registration closes in   m          s  length gt 1     0   s        if diff gt 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  gt  gt 0 s  c-m 60          r textContent  Registration closes in   m      s length gt 1     0   s     tmp  0   tmp time     1000     JsFiddle

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?

Examples related to javascript

Examples related to timer

Examples related to countdown

Examples related to countdowntimer