Code for a simple JavaScript countdown timer

Question

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

User · Answer

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   x000D   x000D     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        gt    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   x000D  span  font-size 4rem  x000D   lt span id  OUT  gt  lt  span gt  x000D   lt br gt  x000D   lt button onclick  origin   new Date   getTime    gt RESET lt  button gt  x000D   lt button onclick  requestAnimationFrame timer   gt RESTART lt  button gt  x000D   lt button onclick  cancelAnimationFrame job   gt STOP lt  button gt  x000D   x000D   x000D

User · Answer

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  lt  0  return      setTimeout function            console log i     secs       do stuff here         timer           1000            x000D   x000D  var i   5  x000D   function timer    x000D      if  --i  lt  0  return  x000D      setTimeout function    x000D          document getElementsByTagName  h1   0  innerHTML   i     secs   x000D          timer    x000D         1000   x000D        x000D   lt h1 gt 5 secs lt  h1 gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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  lt   9  displayedMin    0    displayedMin      if displayedSecs  lt   9  displayedSecs    0    displayedSecs      currentSecs--      document getElementById  timerText   innerHTML   displayedHrs         displayedMin         displayedSecs      if currentSecs     -1  setTimeout decrement 1000

User · Answer

x000D   x000D     Javascript Countdown x000D     Version 1 01 6 7 07  1 20 2000  x000D     by TDavid at http   www tdscripts com  x000D  var now   new Date    x000D  var theevent   new Date  Sep 29 2007 00 00 01    x000D  var seconds    theevent - now    1000  x000D  var minutes   seconds   60  x000D  var hours   minutes   60  x000D  var days   hours   24  x000D  ID   window setTimeout  update      1000   x000D   x000D  function update     x000D    now   new Date    x000D    seconds    theevent - now    1000  x000D    seconds   Math round seconds   x000D    minutes   seconds   60  x000D    minutes   Math round minutes   x000D    hours   minutes   60  x000D    hours   Math round hours   x000D    days   hours   24  x000D    days   Math round days   x000D    document form1 days value   days  x000D    document form1 hours value   hours  x000D    document form1 minutes value   minutes  x000D    document form1 seconds value   seconds  x000D    ID   window setTimeout  update      1000   x000D    x000D   lt p gt  lt font face  Arial  size  3  gt Countdown To January 31  2000  at 12 00   lt  font gt  x000D   lt  p gt  x000D   lt form name  form1  gt  x000D     lt p gt Days x000D       lt input type  text  name  days  value  0  size  3  gt Hours x000D       lt input type  text  name  hours  value  0  size  4  gt Minutes x000D       lt input type  text  name  minutes  value  0  size  7  gt Seconds x000D       lt input type  text  name  seconds  value  0  size  7  gt  x000D     lt  p gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

var count 30   var counter setInterval timer  1000     1000 will  run it every 1 second  function timer       count count-1    if  count  lt   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    lt span id  timer  gt  lt  span gt    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  lt   0           clearInterval counter        return        document getElementById  timer   innerHTML count     secs      watch for spelling

User · Answer

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     lt span id  timer  gt  lt  span gt    lt script gt  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  gt  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     lt  script gt

User · Answer

x000D   x000D     Javascript Countdown x000D     Version 1 01 6 7 07  1 20 2000  x000D     by TDavid at http   www tdscripts com  x000D  var now   new Date    x000D  var theevent   new Date  Nov 13 2017 22 05 01    x000D  var seconds    theevent - now    1000  x000D  var minutes   seconds   60  x000D  var hours   minutes   60  x000D  var days   hours   24  x000D  ID   window setTimeout  update      1000   x000D   x000D  function update     x000D    now   new Date    x000D    seconds    theevent - now    1000  x000D    seconds   Math round seconds   x000D    minutes   seconds   60  x000D    minutes   Math round minutes   x000D    hours   minutes   60  x000D    hours   Math round hours   x000D    days   hours   24  x000D    days   Math round days   x000D    document form1 days value   days  x000D    document form1 hours value   hours  x000D    document form1 minutes value   minutes  x000D    document form1 seconds value   seconds  x000D    ID   window setTimeout  update      1000   x000D    x000D   lt p gt  lt font face  Arial  size  3  gt Countdown To January 31  2000  at 12 00   lt  font gt  x000D   lt  p gt  x000D   lt form name  form1  gt  x000D     lt p gt Days x000D       lt input type  text  name  days  value  0  size  3  gt Hours x000D       lt input type  text  name  hours  value  0  size  4  gt Minutes x000D       lt input type  text  name  minutes  value  0  size  7  gt Seconds x000D       lt input type  text  name  seconds  value  0  size  7  gt  x000D     lt  p gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

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  lt   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  lt   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  gt  0  amp  amp  zero   join  0     num                  heading   countDownTimer  2018-04-02 16 00 59   function       on complete

User · Answer

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    x000D   x000D  var insertZero   n   gt  n  lt  10    0  n      n  x000D     displayTime   n   gt  n   time textContent   insertZero    n 3600  3600          x000D                                               insertZero    n 60  60          x000D                                               insertZero n 60  x000D                            time textContent    IGNITION      x000D   countDownFrom   n   gt   displayTime n   setTimeout     gt  n   sid   countDownFrom --n  x000D                                                             displayTime n   1000    x000D             sid  x000D  countDownFrom 3610   x000D  setTimeout     gt  clearTimeout sid  20005   x000D   lt div id  time  gt  lt  div gt  x000D   x000D   x000D

[jquery] Code for a simple JavaScript countdown timer?

Examples related to jquery

Examples related to timer

Examples related to counter

Examples related to setinterval

Examples related to clearinterval