74

Create a countdown timer with progress bar

 5 years ago
source link: https://www.tuicool.com/articles/hit/eABNfqv
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

In this tutorial, I am going to show you how to create a countdown in JavaScript with progress bar. Here we gonna create a Progress bar with a defined max value and starting value initialized with zero.

Then we will create a countdown. While running the countdown our progress bar will get loaded with time.

GitHub Link is here: https://github.com/saruque/countdown-with-progress-bar-javascript

In order to create this progress bar countdown or reverse stopwatch, we need to do several things.

First of all, we have to create a progress bar. Let’s do it.

<progress value="0" max="10" id="pbar" ></progress>

Here value is assigned with zero because we want to start the progress bar counter with zero.

Max value is here 10. The progress bar starts with zero and can go up to 10.

Now we need an area to print the countdown. Here we are going to give an example of a 10 to 0 countdown in JavaScript. ( ten to zero countdown in JavaScript ). So just create a “p” area to print the countdown.

<p id="counting">10</p>

In this p tag area, we gonna print 10 and then 9 and 8 and so on. That means a countdown like 10 9 8 7 6 5 4 3 2 1 0

You may also get interset in,

Bottom Sticky Music Player Source Code in JavaScript and CSS

Alert Before Leaving A Web Page Using JavaScript jQuery

Countdown in JavaScript with Progress Bar – Reverse stopwatch

The below is the JavaScript Code

<script type="text/javascript">
    
    var reverse_counter = 10;
var downloadTimer = setInterval(function(){
  document.getElementById("pbar").value = 10 - --reverse_counter;
  if(reverse_counter <= 0)
    clearInterval(downloadTimer);
  
  document.getElementById("counting").innerHTML= reverse_counter;
  


},1000);
</script>

We have used setInterval function to call a function at specified intervals.

1000 is our interval time in milliseconds or we can say it as a one-second interval.

As it is a countdown of 10 seconds in this example so progress bar max value to be 10 and interval to be 1 seconds. Thus 10/1= 10, You can either set the progress bar max value to 100 and interval to be 100 milliseconds. The result will be the same but the difference is that in this case, the countdown will be from 100 to 0 and the time to execute the countdown will be 10 seconds.

I will suggest you to change the values of interval time and progress bar max value to see how this is working. It will help you to understand easily.

Progress bar Countdown from 10 to 0 using button onclick in JavaScript

The below is the example of the simple countdown with onclick button. Just test it on your browser and modify as per your wish to have some fun.

How to Play Audio After Few Seconds or Delay in JavaScript

Live word counter from HTML textarea in JavaScript

Here is the full code.

<!DOCTYPE html>
<html>
<head>
 
  <title>CountDown</title>
</head>

<body>
  <progress value="0" max="10" id="pbar" ></progress><p id="counting">10</p>
  <button id="start" onclick="start_countdown()">Start CountDown</button>
  <script type="text/javascript">
    function start_countdown(){
    var reverse_counter = 10;
var downloadTimer = setInterval(function(){
  document.getElementById("pbar").value = 10 - --reverse_counter;
  if(reverse_counter <= 0)
    clearInterval(downloadTimer);
  
  document.getElementById("counting").innerHTML= reverse_counter;
  


},1000);
}



    
  </script>

</body>
</html>

Output:

Capture.png


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK