多JS计数器触发问题：如何为多个div实现递增计数功能

问题分析 #

你当前的代码只针对counter-1单个元素做计数，要实现多个div各自递增到指定数值，需要为每个元素维护独立的计数状态，并批量处理更新逻辑。

步骤1：修改HTML，添加目标值属性 #

给每个计数器div加上data-target属性存储目标数值，同时确保更新内部的span（避免直接修改div的innerHTML覆盖结构）：

<div class="various__item--skills-quantity" id="counter-1" data-target="100"><span></span></div>
<div class="various__item--skills-quantity" id="counter-2" data-target="150"><span></span></div>
<div class="various__item--skills-quantity" id="counter-3" data-target="80"><span></span></div>
<div class="various__item--skills-quantity" id="counter-14" data-target="200"><span></span></div>

步骤2：修正CSS类名（可选） #

你当前CSS类名是.various__item--skill-quantity，但HTML里的类是.various__item--skills-quantity（多了一个s），统一后避免样式失效：

.various__item--skills-quantity {
  color: black;
  transition: all 0.5s;
  margin: 0 5%;
}

步骤3：重写JS逻辑，批量处理所有计数器 #

这段代码会遍历所有计数器元素，为每个元素初始化计数状态，统一更新直到所有元素达到目标值：

// 获取所有计数器元素
const counters = document.querySelectorAll('.various__item--skills-quantity');
// 存储每个计数器的状态：目标元素、当前值、目标值
const counterStates = Array.from(counters).map(el => ({
  element: el.querySelector('span'),
  current: 0,
  target: parseInt(el.dataset.target)
}));

// 启动定时器，每100ms更新一次
const interval = setInterval(() => {
  let allCompleted = true;
  // 遍历更新每个计数器
  counterStates.forEach(state => {
    if (state.current < state.target) {
      state.current++;
      state.element.textContent = state.current;
      allCompleted = false;
    }
  });
  // 所有计数器完成后停止定时器
  if (allCompleted) {
    clearInterval(interval);
  }
}, 100);

关键说明 #

• 用data-target自定义属性让每个计数器可设置不同目标值，更灵活
• 操作内部span元素，保留原div的结构完整性
• 单定时器批量更新所有计数器，比每个元素单独开定时器性能更优
• 通过allCompleted变量判断全局完成状态，完成后自动停止计数

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