CountUp 按钮控制开始计时器 - 轻松实现动态计数效果 - 常规

CountUp 按钮控制开始计时器 - 轻松实现动态计数效果

想要在网页上实现一个动态的计数器，并且可以通过按钮控制开始计时吗？使用 CountUp 库可以轻松实现这一功能。

CountUp 库是一个轻量级的 JavaScript 库，专门用于创建计数动画。它可以将数字从一个值平滑地过渡到另一个值，并支持自定义选项，例如动画速度、格式和前缀/后缀。

实现步骤

引入 CountUp 库

<script src='https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.0.4/countUp.min.js'></script>

创建计数器元素
```
<div id='counter'>0</div>
```

创建按钮元素

<button id='startButton'>开始计时</button>

编写 JavaScript 代码

const counterElement = document.getElementById('counter');
const startButton = document.getElementById('startButton');
let countUp = null;

startButton.addEventListener('click', () => {
  if (!countUp) {
    // 初始化 CountUp 实例
    countUp = new CountUp('counter', 100, { // 设置目标数字为 100
      duration: 3, // 设置动画时长为 3 秒
      useEasing: true, // 使用缓动效果
      useGrouping: true, // 使用分组符 (例如千位分隔符)
      separator: ',' // 设置分组符
    });
    countUp.start(); // 开始动画
  }
});

代码说明

new CountUp('counter', 100, { ... })：创建一个新的 CountUp 实例，第一个参数是计数器元素的 ID，第二个参数是目标数字，第三个参数是配置选项。
countUp.start()：启动计数动画。

总结

通过以上步骤，你就可以轻松实现一个可以通过按钮控制开始计时的动态计数器。CountUp 库的使用非常简单，而且提供了丰富的配置选项，可以满足各种需求。

你可以根据自己的需要修改目标数字、动画时长和配置选项，实现不同的计数效果。