求助：如何在同一页面多次调用不同配置的CountUp函数

没问题！要实现同一页面多个元素用不同配置的CountUp效果，核心思路就是把原来的脚本封装成可复用的函数，让每个元素都能用上专属的配置参数。下面是具体的实现步骤和代码示例：

1. 封装可复用的CountUp逻辑 #

我们把原有的CountUp代码改写成一个能接收自定义配置的函数，这样每个元素都可以传入独立的参数：

function createCountUp(elementSelector, options) {
  // 设置默认配置，用户传入的配置会自动覆盖默认值
  const defaultConfig = {
    start: 0,
    target: 100,
    step: 0.125, // 默认步长
    duration: 2000, // 动画总时长（毫秒）
    decimals: 2 // 保留的小数位数
  };

  // 合并默认配置与用户自定义配置
  const config = { ...defaultConfig, ...options };
  const targetElement = document.querySelector(elementSelector);
  
  // 如果找不到目标元素，直接终止函数
  if (!targetElement) return;

  const increment = config.step;
  const totalSteps = (config.target - config.start) / increment;
  const stepInterval = config.duration / totalSteps;

  let currentValue = config.start;

  // 更新计数的核心函数
  const updateCounter = () => {
    currentValue += increment;
    
    // 到达目标值时停止动画，确保最终显示准确的目标值
    if (currentValue >= config.target) {
      currentValue = config.target;
      targetElement.textContent = currentValue.toFixed(config.decimals);
      return;
    }

    targetElement.textContent = currentValue.toFixed(config.decimals);
    setTimeout(updateCounter, stepInterval);
  };

  // 初始化显示起始值
  targetElement.textContent = config.start.toFixed(config.decimals);
  // 启动计数动画
  setTimeout(updateCounter, stepInterval);
}

2. 为不同元素调用函数，传入专属配置 #

假设你的页面有多个需要计数的元素，比如：

<div class="counter" id="counter-1"></div>
<div class="counter" id="counter-2"></div>
<div class="counter" id="counter-3"></div>

你可以像下面这样分别调用函数，给每个元素设置不同的步长、目标值等：

// 第一个计数器：使用默认步长0.125，目标值100
createCountUp('#counter-1', {
  target: 100
});

// 第二个计数器：步长改为5.25，目标值500，只保留1位小数
createCountUp('#counter-2', {
  target: 500,
  step: 5.25,
  decimals: 1
});

// 第三个计数器：自定义起始值、步长和时长
createCountUp('#counter-3', {
  start: 50,
  target: 200,
  step: 2,
  duration: 3000, // 3秒完成计数
  decimals: 0 // 只显示整数
});

3. 额外提示 #

• 可以把调用代码放在DOMContentLoaded事件监听里，确保DOM加载完成后再执行：

  document.addEventListener('DOMContentLoaded', () => {
    // 在这里调用所有createCountUp函数
  });
  

• 如果需要更丝滑的动画效果，可以把setTimeout换成requestAnimationFrame，并加入缓动公式，不过上面的基础版本已经能满足你的核心需求。

内容的提问来源于stack exchange，提问作者mhuber