实现可复用的多元素JS递增计数器（达到数据集指定上限）

你的原始代码存在几个核心问题：

• counts 被声明为 const，无法修改其值
• limits 是数组，直接和单个数值比较无意义
• amounts 是 NodeList，不能直接设置 textContent，需遍历每个元素
• while 循环会瞬间执行完成，无法实现实时递增的动画效果

以下是修复后的可复用实现：

HTML 代码（无需修改） #

<div class="amount" data-num="100"></div>
<div class="amount" data-num="55"></div>
<div class="amount" data-num="90"></div>
<div class="amount" data-num="65"></div>

JavaScript 代码 #

// 可复用的计数器函数
function startCounters(selector, incrementSpeed = 10) {
  const elements = document.querySelectorAll(selector);
  
  elements.forEach(element => {
    const target = parseInt(element.dataset.num, 10);
    let current = 0;
    
    // 用定时器实现平滑递增动画
    const timer = setInterval(() => {
      current += 1;
      element.textContent = current;
      
      if (current >= target) {
        clearInterval(timer);
        element.textContent = target; // 确保最终显示准确值
      }
    }, incrementSpeed);
  });
}

// 调用函数启动所有计数器
startCounters('.amount', 15); // 第二个参数是递增间隔（毫秒），可按需调整

关键说明： #

• 可复用性：通过传入选择器和可选的递增速度，该函数可作用于任意符合要求的元素
• 独立作用域：每个计数器拥有自己的current和timer变量，互不干扰
• 动画控制：使用setInterval控制递增节奏，实现视觉上的实时递增效果
• 准确性：到达目标值后清除定时器，并强制设置为目标值，避免累加误差

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