Question

我已经想出如何让它从某个数字开始，以及如何平滑过渡到另一个数字，但不知道如何慢慢增加数字。

“你的心脏已经大约殴打了几次......”是我想要实现的一个很好的例子。

我的尝试：

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>

Answer 1

您需要设置3个单独的内容：动画的持续时间，JavaScript和CSS以及您想要达到的值。

例如，如果您想要计算最多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);

})();

如何用JavaScript更新里程表？

1 个答案: