如何用单个JavaScript函数实现多个div的数值递增动画效果？

分两种场景适配，你可以根据自身需求选择：

场景1：所有计数器的起始值、结束值、动画参数完全一致 #

如果要使用200个同规则的计数器，不需要手动写200次调用，直接循环生成调用即可：

// 假设你的div id命名规则为value1、value2...value200
for(let i = 1; i <= 200; i++) {
  animateValue(`value${i}`, 100, 1000000)
}

场景2：每个计数器的参数不同（支持自定义起始/结束值） #

推荐用自定义属性绑定配置的方案，后续新增计数器仅需要修改HTML，不用调整JS代码，维护成本最低：

第一步：修改HTML结构 #

给所有需要动画的计数器添加统一类名，用data-*属性存储每个计数器的专属配置：

<!-- 可以自由自定义每个计数器的起始、结束值 -->
<div class="anim-counter" data-start="100" data-end="1000000">100</div>
<div class="anim-counter" data-start="0" data-end="50000">0</div>
<div class="anim-counter" data-start="200" data-end="800000">200</div>
<!-- 新增200个计数器直接复制标签修改参数即可，不需要修改JS代码 -->

第二步：调整JS代码，批量初始化 #

/**
 * 原动画函数无需做任何修改
 */
function animateValue(id, start, end, duration) {
  let current = start;
  const obj = document.getElementById(id);
  obj.innerHTML = current;
  const setIncrOut = () => {
    let time = Math.random() * 500;
    setTimeout(function() {
      if (current < end) {
        current += 1;
        obj.innerHTML = current;
        setIncrOut(time)
      }
    }, time);
  }
  setIncrOut();
}

// 批量初始化所有计数器
document.querySelectorAll('.anim-counter').forEach((counterEl, index) => {
  // 自动生成唯一id，无需手动给div添加id
  const uid = `anim-counter-${index}`;
  counterEl.id = uid;
  // 读取元素绑定的自定义参数
  const start = Number(counterEl.dataset.start) || 0;
  const end = Number(counterEl.dataset.end) || 100;
  const duration = Number(counterEl.dataset.duration) || 500;
  // 调用动画
  animateValue(uid, start, end, duration);
})

优化提示 #

如果对动画精度要求不高，200个计数器同时运行时，可以把setTimeout替换为全局的requestAnimationFrame统一调度，避免大量定时器占用资源，你当前的实现已经可以满足需求，不做额外优化也可以正常运行。

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