使用 HTML、CSS 和 JavaScript 创建动画计数器

要创建动画计数器，我们将使用 HTML、CSS 和 Javascript。动画计数器可以描述为从 0 开始计数并以特定数字结束的动画显示。

在这篇文章中，计数器的初始值设置为 0，我们的任务是使用 HTML、CSS 和 JavaScript 创建动画计数器。

创建动画计数器的步骤

我们将遵循以下步骤来创建动画计数器。

  • 我们使用了两个 div，其中一个 div 将显示输出，即计数器，另一个 div 充当容器。
  • 我们使用 **container** 类使用 height 和 width 属性设置框的尺寸，使用 border-radius 创建圆角，设置容器的 background-color 和文本 color。
  • 然后我们使用 display 属性将容器设置为 flexbox，并使用 justify-content 和 align-items 属性将计数器居中。
  • **animateCounter()** 函数接受三个参数：**start** 指定计数器的起始值，**end** 指定计数器的结束值（即何时停止），**duration** 指定从开始到结束的计数时间（以毫秒为单位）。
  • **stepTime** 通过获取开始和结束时间差并将其除以持续时间来控制计数器的速度，然后使用 Math.floor 进行舍入，并使用 Math.abs 返回绝对值。
  • **setInterval()** 方法每隔 **stepTime** 调用一次函数以更新计数器，并使用 条件语句 检查当前时间是否与结束时间匹配。当开始值和结束值相同时，**clearInterval()** 方法停止计数器。

示例

Open Compiler
<html>
<head>
    <title>
        Animated Counter using HTML, CSS, and JavaScript
    </title>
    <style>
        .container {
            background-color: #031926;
            color: white;
            border-radius: 10px;
            height: 150px;
            width: 150px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <h3>
        Animated Counter using HTML, CSS, and JavaScript
    </h3>
    <div class="container">
        Counter: 
        <div id="counter">0</div>
    </div>
        <script>
        function animateCounter(start, end, duration) {
            let counter = document.getElementById('counter');
            let stepTime = Math.abs(Math.floor
                           (duration / (end - start)));
            let current = start;
            let timer = setInterval(() => {
                current++;
                counter.textContent = current;
                if (current === end) {
                    clearInterval(timer); 
                }
            }, stepTime);
        }
        animateCounter(0, 501, 3000);
    </script>
</body>
</html>

结论

在这篇文章中，我们了解了一种使用 HTML、CSS 和 JavaScript 创建动画计数器的简单方法。我们使用了 **setInterval()** 方法、**clearInterval()** 方法和 **条件语句** 来创建动画计数器。

更新于： 2024年10月1日

18K+ 浏览量

开启您的 职业生涯

通过完成课程获得认证

立即开始
广告