如何使用JavaScript制作动态计数器

在本文中，我们将使用JavaScript和基本的HTML设计制作一个动态计数器。

动态计数器用于以动画方式显示计数，从0开始到特定的数字结束。这通常被许多网站用于使网页更具吸引力。

实现方法：

在HTML的body标签中，用id指定div标签。
向script标签中添加JavaScript代码。
使用setInterval()方法执行update函数，该函数会递增计数值。
使用getElementById()方法获取id，并使用innerHTML属性显示计数。
如果计数值达到所需的计数，则使用clearInterval()方法停止执行代码。

setInterval()方法会在每个给定的时间间隔重复执行给定的函数，该方法执行到clearInterval()被调用为止。

注意： 请参考上述文章链接以获得更好的理解。

示例1： 在以下代码中，我们定义了变量“counts”，它执行setInterval()方法调用updated()函数。一旦“upto”变量的值达到1000，就会执行clearInterval()方法。我们将计数器值从0增加到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() {
            let count = document.getElementById("counter");
            count.innerHTML = ++upto;
            if (upto === 1000) {
                clearInterval(counts);
            }
        }
    </script>
</body>
</html>

输出：

如何使用JavaScript制作动态计数器

示例2： 使用JavaScript将计数器值从1000递减到0。我们在 style 标签下的 body 标签中添加了一些CSS样式，以使网页更具吸引力。

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() {
            let count = document.getElementById("counter");
            count.innerHTML = --upto;
            if (upto === 0) {
                clearInterval(counts);
            }
        }
    </script>
</body>
</html>