【问题标题】:Duration of counting to a high number计数到高数的持续时间
【发布时间】:2016-10-15 12:38:34
【问题描述】:

我正在尝试将我的计数器的持续时间设置为慢,例如:

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));
}
});  
});

我是这方面的初级人员,所以任何其他建议都将不胜感激。

谢谢

【问题讨论】:

    标签: javascript jquery html counter


    【解决方案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>

    【讨论】:

    • 太棒了!非常感谢你! :)
    • @dcmagpies 请记住,即使持续时间可以设置为非常小的值,最终结果也可能不准确——您需要使用complete: function(){...} 手动设置最终值。
    猜你喜欢
    • 1970-01-01
    • 2020-05-05
    • 1970-01-01
    • 1970-01-01
    • 2011-07-30
    • 1970-01-01
    • 2018-05-06
    • 2010-09-24
    • 1970-01-01
    相关资源
    最近更新 更多