JavaScript计数器对小数值无效，求合适的动画优化方案

原代码的问题在于：当目标值（比如1-5这类小数值）很小时，target / speed计算出的增量太小，再加上Math.floor截断后，数值根本无法推进——比如目标值是5、speed=1000时，增量仅为0.005，每次加完后Math.floor(count + 0.005)还是0，永远到不了5，直接陷入死循环。而把speed改成1的话，增量等于目标值，一步就跳到位，自然没动画效果。

下面给两个可行的解决方案：

方案1：调整增量逻辑，避免截断卡死 #

这个方案改动最小，保留原有的setTimeout逻辑，只调整数值计算和判断条件：

const counters = document.querySelectorAll(".counter");
const animationDuration = 1000; // 固定总动画时长，单位ms

counters.forEach((counter) => {
  const updateCounter = () => {
    const target = +counter.getAttribute("data-target");
    let count = +counter.innerText || 0; // 确保初始值为数字，避免NaN

    // 计算每1ms的增量：总时长1000ms，所以总步数是1000
    const increment = target / (animationDuration / 1);

    // 当剩余数值小于等于增量时，直接设置为目标值，避免无限循环
    if (count < target - increment) {
      // 用Math.ceil代替floor，保证小数值能逐步增长
      counter.innerText = Math.ceil(count + increment);
      setTimeout(updateCounter, 1);
    } else {
      counter.innerText = target;
    }
  };
  updateCounter();
});

方案2：用requestAnimationFrame实现更流畅的动画 #

这个方案基于浏览器的刷新帧计算动画，比setTimeout更精准流畅，不会出现丢帧或时间不准的问题：

const counters = document.querySelectorAll(".counter");
const animationDuration = 1000; // 总动画时长ms

counters.forEach((counter) => {
  const target = +counter.getAttribute("data-target");
  let startTime = null;
  let currentCount = 0;

  function updateCounter(timestamp) {
    if (!startTime) startTime = timestamp;
    // 计算动画进度：0到1之间的小数
    const progress = Math.min((timestamp - startTime) / animationDuration, 1);
    currentCount = progress * target;

    // 这里可以根据需求格式化显示：比如整数用Math.floor，需要小数就用toFixed(1)
    counter.innerText = Math.floor(currentCount);

    if (progress < 1) {
      requestAnimationFrame(updateCounter);
    } else {
      // 最后强制设置为目标值，避免进度计算误差
      counter.innerText = target;
    }
  }

  requestAnimationFrame(updateCounter);
});

说明 #

• 两个方案都固定了总动画时长（比如1000ms），不管目标值是大是小，动画都会在指定时间内完成，不会出现太快或卡死的情况；
• 如果需要显示小数，把Math.floor改成currentCount.toFixed(1)这类格式化方法即可；
• 方案2的动画更平滑，推荐使用。

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