里程表JS连续计数

Question

我正在使用 odometer.js 为 xml 文件中的 php 值设置动画，它工作得很好，但是在该值达到需要的位置后，我希望它按美分计数，看起来像数量正在增长。

window.odometerOptions = {
  format: '(,ddd).dd'
};

// var finalDigit = '<?php echo $value10 ?>';
var finalDigit = 1508.19;
setTimeout(function(){
  $('.odometer').html(finalDigit);
}, 1000);

<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>

我想要实现的目标示例：https://maryland.livecasinohotel.com/

Answer 1

设置另一个计时器或间隔并为其提供更新的值。它似乎从之前设置的值动画到新的：

window.odometerOptions = {
  format: '(,ddd).dd'
};

// var finalDigit = '<?php echo $value10 ?>';
var finalDigit = 1508.19;
setTimeout(function(){
  $('.odometer').html(finalDigit);
}, 500);
setInterval(function(){
  finalDigit += 0.01;
  $('.odometer').html(finalDigit);
}, 2000);

<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">0,000.00</div>