数到一个高数的持续时间

Question

我正在尝试将计数器的持续时间设置得较慢，而无需在代码中设置较大的持续时间数字，例如：

duration: 99999;

最初我将计数器设置为一个较低的数字，但计数将达到 1,000,000,00，但我希望能够控制计数的速度。

这是我目前的设置方式。

<div class="counter" data-count="1000000">0</div>

而我的JS如下：

$('.counter').each(function() {
var $this = $(this),
  countTo = $this.attr('data-count');

$({ countNum: $this.text()}).animate({
countNum: countTo
},

{

duration: 99999,
easing:'linear',
step: function() {
  $this.text(Math.floor(this.countNum));
}
});  
});

我是这方面的大三学生，如果有任何其他建议，我们将不胜感激。

谢谢

Answer 1

如果您想设置计数的速度，您可以尝试设置持续时间（以毫秒为单位）以匹配 countTo 值。例如，如果您希望每秒进行一次增量，请执行：duration: parseInt(countTo)*1000.

$('.counter').each(function() {
  var $this = $(this),
    countTo = $this.attr('data-count');

  $({
    countNum: $this.text()
  }).animate({
    countNum: countTo
  }, {
    duration: parseInt(countTo) * 1000,
    easing: 'linear',
    step: function() {
      $this.text(Math.floor(this.countNum));
    },
    complete: function() {
      // Ensure that the final value is updated correctly
      // ... especially when using very short durations
      $this.text(this.countNum);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="counter" data-count="1000000">0</div>

数到一个高数的持续时间

Duration of counting to a high number

html

javascript

jquery

counter