How to make animated counter using JavaScript ? - GeeksforGeeks

31 Oct, 2021
In this article, we will create an animated counter using JavaScript and basic HTML for designing.
An animated counter is used to display the counts in an animation starting from 0 and ending at a specific number. This is generally used by many websites to make a web page more attractive.
Approach:
In the HTML body tag, specify the div tag with an id.
Add JavaScript code to the script tag.
Use the setInterval() method to execute the update function which will increment the count value.
Get the id using the getElementById() method and use the innerHTML property to display the count.
If the count value reached the required count then stop executing the code using the clearInterval() method.
The setInterval() method repeats a given function at every given time interval and this method executes until clearInterval() is called.
Note: Please refer to the above-mentioned article links for a better understanding. 
Example 1: In the following code, we have taken variable “counts” which executes the setInterval() method which calls the updated() function. Once the “upto” variable value reaches the value of 1000, the clearInterval() method is executed. We have incremented the value of the counter value from 0 to 1000.
HTML
<!DOCTYPE html><html lang="en">  <body style="text-align:center">    <h1>GeeksforGeeks</h1>    <p>COUNTS</p>    <div id="counter">        <!-- counts -->    </div>      <script>        let counts=setInterval(updated);        let upto=0;        function updated(){            var count= document.getElementById("counter");            count.innerHTML=++upto;            if(upto===1000)            {                clearInterval(counts);            }        }    </script></body></html>
Output: 
Example 2: Decrement the counter value from 1000 to 0 using JavaScript. We have added some CSS styles under the style tag in the body tag to make the webpage more attractive. 
HTML
<!DOCTYPE html><html lang="en"><head>    <style>        body{            background-color: green;        }        #counter{            color:white;        }    </style></head><body style="text-align:center">    <h1>GeeksforGeeks</h1>    <p>COUNTS DECREMENT</p>    <div id="counter">        <!-- counts -->    </div>      <script>        let counts=setInterval(updated);        let upto=1000;        function updated(){            var count= document.getElementById("counter");            count.innerHTML=--upto;            if(upto === 0) {                clearInterval(counts);            }        }    </script></body></html>
Output: 
HTML-Tags
JavaScript-Questions
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML
Design a web page using HTML and CSS
Form validation using jQuery
Angular File Upload
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to calculate the number of days between two dates in javascript?