如何使用Odometer.js实现数值到达目标值后的持续按分位累加

嘿，看来你已经搞定odometer的基础动画效果啦！要实现「到达目标值后持续按分位（0.01）向上增长」的效果，只需要在初始动画完成后加一个定时循环来不断更新数值就行，我给你调整了代码，你可以参考一下：

完整代码示例 #

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
<link rel="stylesheet" href="https://github.hubspot.com/odometer/themes/odometer-theme-default.css" /> 
<script src="http://github.hubspot.com/odometer/odometer.js"></script> 

<div class="odometer">0000.00</div>

<script>
// 配置Odometer的数值格式
window.odometerOptions = { format: '(,ddd).dd' }; 

// 初始目标值（替换回你的PHP变量即可：var finalDigit = <?php echo $value10 ?>;）
var finalDigit = 1508.19; 
// 用于追踪当前数值，避免直接读取DOM导致的精度问题
var currentValue = 0;

$(document).ready(function() {
  // 先执行初始动画，1秒后跳转到目标值
  setTimeout(function(){ 
    $('.odometer').html(finalDigit);
    currentValue = finalDigit;
    
    // 初始动画完成后，启动持续累加的定时器
    setInterval(function() {
      // 每次累加0.01，用toFixed(2)处理浮点精度问题，避免出现多位小数
      currentValue = parseFloat((currentValue + 0.01).toFixed(2));
      // 更新Odometer数值
      $('.odometer').html(currentValue);
    }, 100); // 这里的100是累加间隔（毫秒），数值越小增长速度越快
  }, 1000);
});
</script>

关键细节说明 #

• 浮点精度处理：用toFixed(2)把数值保留两位小数，再转成浮点数，这样能避免JavaScript浮点运算导致的1508.19 + 0.01 = 1508.1999999999这类异常问题。
• 增长速度控制：调整setInterval的第二个参数（毫秒数），比如改成50就会让数字增长更快，改成200则会变慢，你可以根据需求调整。
• 精准触发循环：如果想确保初始动画完全结束后才开始累加，可以替换成监听Odometer的动画结束事件，代码如下：

// 替换原setTimeout内的循环启动代码
$('.odometer').on('odometer-animation-end', function() {
  setInterval(function() {
    currentValue = parseFloat((currentValue + 0.01).toFixed(2));
    $('.odometer').html(currentValue);
  }, 100);
});

这样调整后，你的数字就会先平滑动画到目标值，然后持续以0.01的步长不断增长啦～

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