2

我不擅长 javascript，但我希望有一个漂亮的小动画，可以向上计数。我在 Github 上找到了这个，但是速度很慢。（我正在计算一个小数点后 10 位的数字）。任何人都对如何修改它有任何提示，所以它会更快？（我试图减少数据间隔，但它有点停滞在“0”。

<p class="counter" data-interval="0" data-format="999999" data-stop="193847"></p>
4

6 回答 6

6

这将对您有所帮助，也很简单，您可以通过更改持续时间来更改速度并通过更改计数器来更改起始编号：0

$('.count').each(function () {
  var $this = $(this);
  jQuery({ Counter: 0 }).animate({ Counter: $this.attr('data-stop') }, {
    duration: 1000,
    easing: 'swing',
    step: function (now) {
      $this.text(Math.ceil(now));
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="count" data-stop="193847">193847</span>
<br/>
<span class="count" data-stop="190">190</span>
<br/>
<span class="count" data-stop="1938">1938</span>

于 2015-06-26T17:16:18.737 回答
5

我找到了完美的解决方案：

https://github.com/mhuggins/jquery-countTo

于 2013-05-10T08:08:29.060 回答
3

假设您想在 5 秒内数到 200,000。

这将是每秒 40,000 次增量或 60,000 毫秒内 40,000 次增量，即每次迭代的间隔为 1.5 毫秒。

您使用的任何浏览器很可能都无法处理这种间隔。执行此操作的最佳方法可能会确定您希望它以多快的速度计入您的最终值并更改步骤，以便您可以在更合理的时间间隔内以正确的时间到达那里。

例如，假设 5000 毫秒是您希望花费的时间，并且您希望间隔为 20 毫秒。

假设您有 5000/20 或 250 步。您必须按 200000/250 或 800 计数才能在 5 秒内达到您的最终值。

于 2013-05-09T18:37:01.957 回答
2

您不需要 jQuery 插件，只需使用 .animate：

jQuery('.counter').each(function(){
  var $elm = this;
  var from = {property: 0};
  var to = {property: $elm.data('stop')};
  var duration = $elm.data('duration');

  jQuery(from).animate(to, {
      duration: duration,
      step: function() {
          $elm.html(this.property);
      }
  });
});

提示：您可以通过设置 jQuery.fx.interval 来优化 jQuery 的帧率，默认为 13 (ms)。

更多示例：http: //james.padolsey.com/javascript/fun-with-jquerys-animate/

于 2013-07-24T18:03:23.337 回答
0

如果有人想以一定的增量增加计数器，请使用，

// HTML

<span class="stat-count">10000</span>

// JS

$(function() {
    function count($this){
        var current = parseInt($this.html(), 10);
        current = current + 50; /* Where 50 is increment */

    $this.html(++current);
    if(current > $this.data('count')){
        $this.html($this.data('count'));
    } else {    
        setTimeout(function(){count($this)}, 5);
    }
}        

$(".stat-count").each(function() {
  $(this).data('count', parseInt($(this).html(), 10));
  $(this).html('0');
  count($(this));
 });

});

Jquery 对页面加载的计数有一定的限制、计数时间和计数增量。

于 2013-10-22T15:37:11.773 回答
0

从您发布的插件中，似乎有一个名为interval的选项。默认值为 1000 毫秒，请尝试减少它以使其计数更快。

像这样的东西应该可以解决问题：

<span></span>

<script>
$('span').addClass('counter counter-analog')
         .counter({
   // several options here
    interval: 1,
    });

</script>

希望能帮助到你！

于 2013-05-09T17:32:29.590 回答