How to Create A Countdown Timer with Progress Bar in JavaScript




How to Create A Countdown Timer with Progress Bar in JavaScript

In this instructional exercise, I am will demonstrate to you proper methodologies to make a commencement in JavaScript with advancement bar. Here we going to make a Progress bar with a characterized max esteem and beginning quality instated with zero. 

At that point we will make a commencement. While running the commencement our advancement bar will get stacked with time. 

With the end goal to make this advancement bar commencement or switch stopwatch, we have to complete a few things. 

As a matter of first importance, we need to make an advancement bar. How about we do it. 

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

Here esteem is relegated with zero since we need to begin the advancement bar counter with zero. 

Max esteem is here 10. The advancement bar begins with zero and can go up to 10. 

Presently we require a zone to print the commencement. Here we will give a case of a 10 to 0 commencement in JavaScript. ( ten to zero commencement in JavaScript ). So simply make a "p" territory to print the commencement. 

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

In this p label territory, we going to print 10 and afterward 9 and 8 et cetera. That implies a commencement like 10 9 8 7 6 5 4 3 2 1 0 

You may likewise get interset in, 

Base Sticky Music Player Source Code in JavaScript and CSS 

Alarm Before Leaving A Web Page Using JavaScript jQuery 

Commencement in JavaScript with Progress Bar – Reverse stopwatch 

The underneath 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 utilized setInterval capacity to call a capacity at indicated interims. 

1000 is our interim time in milliseconds or we can state it as a one-moment interim. 

As it is a commencement of 10 seconds in this precedent so advance bar max incentive to be 10 and interim to be 1 seconds. In this manner 10/1= 10, You can either set the advancement bar max incentive to 100 and interim to be 100 milliseconds. The outcome will be the equivalent yet the thing that matters is that for this situation, the commencement will be from 100 to 0 and an opportunity to execute the commencement will be 10 seconds. 

I will propose you to change the estimations of interim time and advancement bar max incentive to perceive how this is functioning. It will assist you with understanding effortlessly. 

Advancement ban Countdown from 10 to 0 utilizing catch onclick in JavaScript 

The underneath is the case of the basic commencement with onclick catch. Simply test it on your program and adjust according to your desire to have some good times. 

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>

 



Author Biography.

CrowdforThink
CrowdforThink

CrowdforThink is the leading Indian media platform, known for its end-to-end coverage of the Indian startups through news, reports, technology and inspiring stories of startup founders, entrepreneurs, investors, influencers and analysis of the startup eco-system, mobile app developers and more dedicated to promote the startup ecosystem.

Join Our Newsletter.

Subscribe to CrowdforThink newsletter to get daily update directly deliver into your inbox.

CrowdforJobs is an advanced hiring platform based on artificial intelligence, enabling recruiters to hire top talent effortlessly.

CrowdforJobs

CrowdforApps brings to you the well researched list of the most successful and finest App development companies, Web software developers.

CrowdforApps

CrowdforGeeks is where lifelong learners come to learn the skills they need, to land the jobs they want, to build the lives they deserve.

CrowdforGeeks

CrowdforThink is a leading Indian media and information platform, known for its end-to-end coverage of the Indian startup ecosystem.

CrowdforThink
CFT

News & Blogs

d432ce51653c4558fc49e6f6ba3ca0c0.jpg

How to Play Audio After Few Seconds or Delay in...

In this instructional exercise, I will demonstrate to you how effortlessly you can play sound fol...

f62dbc1a41f2267ac3920998ea272871.jpg

You Don’t Need Loops in JavaScript

1. To Loop Through All Elements and Get an new modified array Using loop: var names = ["Jack",...

c8008f102d5c7bbd9301b940850a9d14.jpg

Learn JavaScript functional programming from Av...

Pure Functions I have lot of sympathy towards Gamora as she is deprived of her parent’s lo...

Top Authors

Hey, I am Suraj - a full-time blogger and a social media expert currently working on the Growth H...

Suraj Kumar

With good communication and writing skiils, Astha Sharma is a full-time content writer working wi...

Astha Sharma

Overall 3+ years of experience as a Full Stack Developer with a demonstrated history of working i...

Lokesh Gupta

Amit Agrawal Founder and COO at Cyber Infrastructure (P) Limited which is an custom software deve...

Amit Agrawal
CFT

Our Client Says

WhatsApp Chat with Our Support Team