使用CountUp按钮控制开始计时器

本文介绍如何使用CountUp库实现点击按钮后从0开始递增的计时器功能。

原理：

使用CountUp库创建一个计时器对象。
使用一个按钮来控制计时器的开始和停止。
当按钮被点击时，如果计时器处于停止状态，则启动计时器；如果计时器处于运行状态，则停止计时器。

实现步骤：

引入CountUp库：

<script src='https://cdn.jsdelivr.net/npm/countup.js@2.0.10/dist/countUp.min.js'></script>

创建一个HTML按钮：

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

使用JavaScript代码实现计时器控制：

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

startButton.addEventListener('click', () => {
  if (countUp === null) {
    countUp = new CountUp('counter', 0, 100, 0, 2.5, { useEasing: true, useGrouping: true });
    countUp.start();
  } else {
    countUp.pause();
    countUp = null;
  }
});

代码说明：

countUp 变量用于保存计时器对象。
startButton.addEventListener('click', () => { ... }) 用于监听按钮点击事件。
if (countUp === null) 用于判断计时器是否已经启动。
countUp = new CountUp('counter', 0, 100, 0, 2.5, { useEasing: true, useGrouping: true }); 创建一个新的CountUp对象，并设置计时器的初始值、结束值、精度、动画时长等参数。
countUp.start() 启动计时器。
countUp.pause() 停止计时器。

注意：

此代码仅供参考，你需要根据自己的具体需求进行修改。
CountUp库的更多用法和配置选项，请参考官方文档：https://github.com/inorganik/countUp.js