Create a simple 10 second countdown

Question

I would like a line that says   Your download will begin in  10  9  8  etc  Beginning on page load  seconds    I already have the 10 second download text set up  and I have looked at other stackoverflow posts  They all include CSS  and Jquery  I would like just a Javascript HTML timer     No other requests have been made for a simple line stating  You re download will begin in x seconds   How would I do this

User · Answer

A solution using Promises  includes both progress bar  amp  text countdown    x000D   x000D  ProgressCountdown 10   pageBeginCountdown    pageBeginCountdownText   then value   gt  alert  Page has started    value       x000D   x000D  function ProgressCountdown timeleft  bar  text    x000D    return new Promise  resolve  reject    gt    x000D      var countdownTimer   setInterval      gt    x000D        timeleft--  x000D   x000D        document getElementById bar  value   timeleft  x000D        document getElementById text  textContent   timeleft  x000D   x000D        if  timeleft  lt   0    x000D          clearInterval countdownTimer   x000D          resolve true   x000D          x000D         1000   x000D        x000D    x000D   lt div class  row begin-countdown  gt  x000D     lt div class  col-md-12 text-center  gt  x000D       lt progress value  10  max  10  id  pageBeginCountdown  gt  lt  progress gt  x000D       lt p gt  Begining in  lt span id  pageBeginCountdownText  gt 10  lt  span gt  seconds lt  p gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

JavaScript has built in to it a function called setInterval  which takes two arguments - a function  callback and an integer  timeout  When called  setInterval will call the function you give it every timeout milliseconds   For example  if you wanted to make an alert window every 500 milliseconds  you could do something like this   function makeAlert         alert  Popup window         setInterval makeAlert  500     However  you don t have to name your function or declare it separately  Instead  you could define your function inline  like this   setInterval function    alert  Popup window        500     Once setInterval is called  it will run until you call clearInterval on the return value  This means that the previous example would just run infinitely  We can put all of this information together to make a progress bar that will update every second and after 10 seconds  stop updating    x000D   x000D  var timeleft   10  x000D  var downloadTimer   setInterval function    x000D    if timeleft  lt   0   x000D      clearInterval downloadTimer   x000D      x000D    document getElementById  progressBar   value   10 - timeleft  x000D    timeleft -  1  x000D     1000   x000D   lt progress value  0  max  10  id  progressBar  gt  lt  progress gt  x000D   x000D   x000D    Alternatively  this will create a text countdown    x000D   x000D  var timeleft   10  x000D  var downloadTimer   setInterval function    x000D    if timeleft  lt   0   x000D      clearInterval downloadTimer   x000D      document getElementById  countdown   innerHTML    Finished   x000D      else   x000D      document getElementById  countdown   innerHTML   timeleft     seconds remaining   x000D      x000D    timeleft -  1  x000D     1000   x000D   lt div id  countdown  gt  lt  div gt  x000D   x000D   x000D

User · Answer

x000D   x000D  var seconds inputs    document getElementsByClassName  deal left seconds    x000D      var total timers   seconds inputs length  x000D      for   var i   0  i  lt  total timers  i     x000D          var str seconds    seconds    var str seconds prod id    seconds prod id    x000D          var seconds prod id   seconds inputs i  getAttribute  data-value    x000D          var cal seconds   seconds inputs i  getAttribute  value    x000D   x000D          eval  var     str seconds   seconds prod id          cal seconds         x000D          eval  var     str seconds prod id   seconds prod id          seconds prod id         x000D        x000D      function timer     x000D          for   var i   0  i  lt  total timers  i      x000D              var seconds prod id   seconds inputs i  getAttribute  data-value    x000D   x000D              var days   Math floor eval  seconds   seconds prod id    24   60   60   x000D              var hoursLeft   Math floor  eval  seconds   seconds prod id   -  days   86400    x000D              var hours   Math floor hoursLeft   3600   x000D              var minutesLeft   Math floor  hoursLeft  -  hours   3600    x000D              var minutes   Math floor minutesLeft   60   x000D              var remainingSeconds   eval  seconds   seconds prod id    60  x000D   x000D              function pad n    x000D                  return  n  lt  10    0    n   n   x000D                x000D              document getElementById  deal days     seconds prod id  innerHTML   pad days   x000D              document getElementById  deal hrs     seconds prod id  innerHTML   pad hours   x000D              document getElementById  deal min     seconds prod id  innerHTML   pad minutes   x000D              document getElementById  deal sec     seconds prod id  innerHTML   pad remainingSeconds   x000D   x000D              if  eval  seconds    seconds prod id     0    x000D                  clearInterval countdownTimer   x000D                  document getElementById  deal days     seconds prod id  innerHTML   document getElementById  deal hrs     seconds prod id  innerHTML   document getElementById  deal min     seconds prod id  innerHTML   document getElementById  deal sec     seconds prod id  innerHTML   pad 0   x000D                else   x000D                  var value   eval  seconds   seconds prod id   x000D                  value--  x000D                  eval  seconds     seconds prod id          value         x000D                x000D            x000D        x000D   x000D      var countdownTimer   setInterval  timer     1000   x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt input type  hidden  class  deal left seconds  data-value  1  value  10  gt  x000D   lt div class  box-wrapper  gt  x000D       lt div class  date box  gt   lt span class  key  id  deal days 1  gt 00 lt  span gt   lt span class  value  gt DAYS lt  span gt   lt  div gt  x000D   lt  div gt  x000D   lt div class  box-wrapper  gt  x000D       lt div class  hour box  gt   lt span class  key  id  deal hrs 1  gt 00 lt  span gt   lt span class  value  gt HRS lt  span gt   lt  div gt  x000D   lt  div gt  x000D   lt div class  box-wrapper  gt  x000D       lt div class  minutes box  gt   lt span class  key  id  deal min 1  gt 00 lt  span gt   lt span class  value  gt MINS lt  span gt   lt  div gt  x000D   lt  div gt  x000D   lt div class  box-wrapper hidden-md  gt  x000D       lt div class  seconds box  gt   lt span class  key  id  deal sec 1  gt 00 lt  span gt   lt span class  value  gt SEC lt  span gt   lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

x000D   x000D  var seconds inputs    document getElementsByClassName  deal left seconds        var total timers   seconds inputs length      for   var i   0  i  lt  total timers  i             var str seconds    seconds    var str seconds prod id    seconds prod id            var seconds prod id   seconds inputs i  getAttribute  data-value            var cal seconds   seconds inputs i  getAttribute  value             eval  var     str seconds   seconds prod id          cal seconds                 eval  var     str seconds prod id   seconds prod id          seconds prod id                   function timer             for   var i   0  i  lt  total timers  i                  var seconds prod id   seconds inputs i  getAttribute  data-value                 var days   Math floor eval  seconds   seconds prod id    24   60   60               var hoursLeft   Math floor  eval  seconds   seconds prod id   -  days   86400                var hours   Math floor hoursLeft   3600               var minutesLeft   Math floor  hoursLeft  -  hours   3600                var minutes   Math floor minutesLeft   60               var remainingSeconds   eval  seconds   seconds prod id    60               function pad n                    return  n  lt  10    0    n   n                             document getElementById  deal days     seconds prod id  innerHTML   pad days               document getElementById  deal hrs     seconds prod id  innerHTML   pad hours               document getElementById  deal min     seconds prod id  innerHTML   pad minutes               document getElementById  deal sec     seconds prod id  innerHTML   pad remainingSeconds                if  eval  seconds    seconds prod id     0                    clearInterval countdownTimer                   document getElementById  deal days     seconds prod id  innerHTML   document getElementById  deal hrs     seconds prod id  innerHTML   document getElementById  deal min     seconds prod id  innerHTML   document getElementById  deal sec     seconds prod id  innerHTML   pad 0                 else                   var value   eval  seconds   seconds prod id                   value--                  eval  seconds     seconds prod id          value                                            var countdownTimer   setInterval  timer     1000   x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt input type  hidden  class  deal left seconds  data-value  1  value  10  gt   lt div class  box-wrapper  gt       lt div class  date box  gt   lt span class  key  id  deal days 1  gt 00 lt  span gt   lt span class  value  gt DAYS lt  span gt   lt  div gt   lt  div gt   lt div class  box-wrapper  gt       lt div class  hour box  gt   lt span class  key  id  deal hrs 1  gt 00 lt  span gt   lt span class  value  gt HRS lt  span gt   lt  div gt   lt  div gt   lt div class  box-wrapper  gt       lt div class  minutes box  gt   lt span class  key  id  deal min 1  gt 00 lt  span gt   lt span class  value  gt MINS lt  span gt   lt  div gt   lt  div gt   lt div class  box-wrapper hidden-md  gt       lt div class  seconds box  gt   lt span class  key  id  deal sec 1  gt 0p0 lt  span gt   lt span class  value  gt SEC lt  span gt   lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

This does it in text   x000D   x000D   lt p gt  The download will begin in  lt span id  countdowntimer  gt 10  lt  span gt  Seconds lt  p gt  x000D   x000D   lt script type  text javascript  gt  x000D      var timeleft   10  x000D      var downloadTimer   setInterval function    x000D      timeleft--  x000D      document getElementById  countdowntimer   textContent   timeleft  x000D      if timeleft  lt   0  x000D          clearInterval downloadTimer   x000D        1000   x000D   lt  script gt  x000D   x000D   x000D

[javascript] Create a simple 10 second countdown

The answer is

Examples related to javascript

Examples related to html

Examples related to timer

Tags