オドメーターをJavaScriptで更新するには？

Question

特定の番号で開始する方法と、別の番号にスムーズに移行する方法を考えましたが、数値をゆっくりと増やす方法はわかりません。

"あなたの心はおおよそ...時に殴られました"というのは、私が達成しようとしていることの良い例です。

Link to Odometer

私の試み：

setTimeout(function() { 
 
    odometer.innerText = 456; 
 
}, 1000);

<!-- Odometr includes --> 
 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/odometer@0.4.8/themes/odometer-theme-car.min.css"> 
 
<script src="https://cdn.jsdelivr.net/npm/odometer@0.4.8/odometer.min.js"></script> 
 

 
<div id="odometer" class="odometer odometer-theme-car">123</div>

不足しているものがある場合downvoteしないでください。

Answer 1

アニメーションの長さ、JavaScriptとCSSの両方、および到達したい値の3つを別々に設定する必要があります。

たとえば、10までカウントする場合は、「1秒あたり1回のリクエスト」あたり10秒かかります。

window.odometerOptions = { 
    duration: 1000 // duration in milliseconds 
}; 

setTimeout(function(){ 
    odometer.innerHTML = 10; // value to reach 
}, 1000); 

次に、CSSでスタイルを上書きします。

// duration in seconds 
.odometer.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-animating-down.odometer-animating .odometer-ribbon-inner { 
    -webkit-transition-duration: 10s !important; 
    -moz-transition-duration: 10s !important; 
    -ms-transition-duration: 10s !important; 
    -o-transition-duration: 10s !important; 
    transition-duration: 10s !important 
} 

希望する最大値に応じて数式を変更してください。無期限にカウントアップし続ける場合は、look into JavaScript's setInterval() method。

更新

ここで簡単な、無期限の実装です。

(function() { 

    // set start value 
    var currentValue = 0; 

    // every second, set odometer value to current value, and count up by one 
    setInterval(function() { 

    odometer.innerHTML = currentValue; 
    currentValue++; 

    }, 1000); 

})();