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

4199c21ae5f0296764a6397c7de7f6e2.png

An In-Depth Guide On Choosing Best Frontend Fra...

Since the outbreak of COVID-19, business operations have been moved online to make ends meet....

58f59261d72ce612f18b6a7c527ad4d8.jpg

What is the Difference Between =, ==, and === i...

What is = in JavaScript?  Equivalent to (=) is a task administrator, which sets the variabl...

417e9598e1b8bdba442a9bac4874f919.jpg

JavaScript Mobile Frameworks worth considering ...

When it comes to startups entering the business arena, they have very tough competition. This is ...

Top Authors

Lamia Rochdi is the Marketing Manager at Bell Flavors & Fragrances EMEA. A successful family-...

Lamia Rochdi

I’m Mertin Wilson a technician in a camera company and certified expert of different P...

Mertin Wilson

Zakariya has recently joined the PakWheels team as a Content Marketing Executive, shortly after g...

Zakariya Usman

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

Lokesh Gupta
CFT

Our Client Says

WhatsApp Chat with Our Support Team