基于Math.random的数字计数动画异常排查及调速需求

我来帮你拆解代码里的问题，以及对应的修复方案：

一、为什么目标数字为1.9时动画无效果？ #

你遇到的问题主要有两个核心原因：

• 目标值被错误缩小：代码里把动画目标设为countTo - 1，当countTo是1.9时，目标值变成了0.9，动画从0到0.9的过程中，Math.floor(now)始终为0，导致Math.random() * Math.floor(now)一直是0，所以页面上只会显示0，直到动画结束才跳到1.9，看起来就像没动画。
• 只支持整数处理：代码里用Math.floor把随机数转成整数，但1.9是小数，整数随机数无法体现小数增长的过程，自然看不到变化。

二、如何放慢动画速度？ #

这个很简单，直接增大animate方法里的duration参数值就行，比如从原来的2000（2秒）改成5000（5秒），数值越大动画越慢。

三、修正后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
#countAnimation {
  display: flex;
  justify-content: space-between;
  margin-bottom:200px;
}
.box-counter {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #cacaca;
  color: #0f0f0f;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
  font-size: 50px;
}
</style>
<div id="countAnimation">
  <div class="box-counter">
    <div class="count">200</div>
  </div>
  <div class="box-counter">
    <div class="count">1.9</div>
  </div>
  <div class="box-counter">
    <div class="count">1500</div>
  </div>
</div>
<script>
// function for count statistic
function countNumber() {
  $('.count').each(function() {
    var countTo = Number($(this).text());
    // 获取目标数字的小数位数，默认0（整数）
    var decimalPlaces = countTo.toString().split('.')[1]?.length || 0;
    $(this).prop('Counter', 0).animate({
      Counter: countTo  // 直接用目标值作为动画终点，不再减1
    }, {
      duration: 5000,  // 调整为5秒，放慢动画速度
      easing: 'swing',
      step: function(now) {
        let randomNum;
        if (decimalPlaces > 0) {
          // 小数场景：生成0到now之间的随机数，保留对应小数位数
          randomNum = Math.random() * now;
          randomNum = randomNum.toFixed(decimalPlaces);
        } else {
          // 整数场景：生成0到now之间的随机整数
          randomNum = Math.floor(Math.random() * Math.floor(now + 1));
          // 避免一直停留在0的情况
          randomNum = randomNum === 0 && now > 0 ? 1 : randomNum;
        }
        $(this).text(randomNum);
      },
      complete: function() {
        $(this).text(countTo);
      }
    });
  });
}
$(document).ready(function() {
  countNumber();
});
</script>

四、关键优化点说明 #

1. 兼容小数场景：通过decimalPlaces变量判断目标数字是否为小数，分别处理随机数生成逻辑，保留对应小数位数。
2. 修正动画目标值：直接使用countTo作为动画终点，避免小数场景下目标值过小导致的无变化问题。
3. 整数场景优化：调整随机数范围到now + 1，并补充了避免一直显示0的判断，让整数动画更流畅。
4. 可调整速度：修改duration参数即可自由控制动画快慢，数值单位是毫秒。

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