Geek Answers Handbook

Create a simple 10 second countdown

I need a line that says:

Your download will begin in (10, 9, 8, etc. Beginning on page load) seconds.

I already have 10 second text to download, and I looked at other stackoverflow entries. All of them include CSS and jQuery. I would just like a Javascript / HTML timer.

No other requests were made for a simple line that says: "Download will start in x seconds." How can I do it?

+29
source share
4 answers

JavaScript has a built-in function called setInterval that takes two arguments - a function, callback and an integer, timeout . When called, setInterval will call the function that you give it every timeout milliseconds.

For example, if you want to create a warning window every 500 milliseconds, you can do something like this.

 function makeAlert(){ alert("Popup window!"); }; setInterval(makeAlert, 500);

However, you do not need to name your function or declare it separately. Instead, you can define an inline function, like so.

 setInterval(function(){ alert("Popup window!"); }, 500);

After calling setInterval it will work until you call clearInterval for the return value. This means that the previous example will work endlessly. We can gather all this information together to create a progress bar that will be updated every second, and will stop updating after 10 seconds.

 var timeleft = 10; var downloadTimer = setInterval(function(){ document.getElementById("progressBar").value = 10 - timeleft; timeleft -= 1; if(timeleft <= 0){ clearInterval(downloadTimer); } }, 1000); 
 <progress value="0" max="10" id="progressBar"></progress>

In addition, this will create a text countdown.

 var timeleft = 10; var downloadTimer = setInterval(function(){ document.getElementById("countdown").innerHTML = timeleft + " seconds remaining"; timeleft -= 1; if(timeleft <= 0){ clearInterval(downloadTimer); document.getElementById("countdown").innerHTML = "Finished" } }, 1000); 
 <div id="countdown"></div>

+73
source

This is done in the text.

 <p> The download will begin in <span id="countdowntimer">10 </span> Seconds</p> <script type="text/javascript"> var timeleft = 10; var downloadTimer = setInterval(function(){ timeleft--; document.getElementById("countdowntimer").textContent = timeleft; if(timeleft <= 0) clearInterval(downloadTimer); },1000); </script>
+38
source

A solution using Promises includes both a progress bar and a text countdown.

 ProgressCountdown(10, 'pageBeginCountdown', 'pageBeginCountdownText').then(value => alert('Page has started: ${value}.')); function ProgressCountdown(timeleft, bar, text) { return new Promise((resolve, reject) => { var countdownTimer = setInterval(() => { timeleft--; document.getElementById(bar).value = timeleft; document.getElementById(text).textContent = timeleft; if (timeleft <= 0) { clearInterval(countdownTimer); resolve(true); } }, 1000); }); } 
 <div class="row begin-countdown"> <div class="col-md-12 text-center"> <progress value="10" max="10" id="pageBeginCountdown"></progress> <p> Begining in <span id="pageBeginCountdownText">10 </span> seconds</p> </div> </div>
+4
source

To target the download button after 10 seconds:

 <p> The download will begin in <span id="countdowntimer">10 </span> Seconds</p> <script type="text/javascript"> var timeleft = 10; var downloadTimer = setInterval(function(){ timeleft--; document.getElementById("countdowntimer").textContent = timeleft; if(timeleft <= 0) clearInterval(downloadTimer); },1000); </script>
0
source

More articles:


All Articles