如何使用 JavaScript 制作动画计数器？

在本文中，我们将使用 JavaScript 和基本 HTML 来创建一个动画计数器进行设计。

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

方法：

• 在 HTML 正文标记中，使用 id 指定 div 标记。
• 将 JavaScript 代码添加到脚本标记。
• 使用 setInterval() 方法执行将增加计数值的更新函数。
• 使用 getElementById() 方法获取 id 并使用 innerHTML 属性显示计数。
• 如果计数值达到所需的计数，则使用 clearInterval() 方法停止执行代码。

setInterval() 方法在每个给定的时间间隔重复一个给定的函数，并且这个方法一直执行到 clearInterval() 被调用。

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

示例 1：在下面的代码中，我们采用变量“ counts”执行 setInterval() 方法，该方法调用updated()函数。一旦“ upto ”变量值达到 1000 的值，就会执行 clearInterval() 方法。我们已将计数器值的值从 0 增加到 1000。

HTML

  

    GeeksforGeeks
    COUNTS
    
        
    
  
    
        let counts=setInterval(updated);
        let upto=0;
        function updated(){
            var count= document.getElementById("counter");
            count.innerHTML=++upto;
            if(upto===1000)
            {
                clearInterval(counts);
            }
        }
    

输出：

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

HTML

    
        body{
            background-color: green;
        }
        #counter{
            color:white;
        }
    


    GeeksforGeeks
    COUNTS DECREMENT
    
        
    
  
    
        let counts=setInterval(updated);
        let upto=1000;
        function updated(){
            var count= document.getElementById("counter");
            count.innerHTML=--upto;
            if(upto === 0) {
                clearInterval(counts);
            }
        }
    

输出：