Question

我的页面上有一些编号统计数据，我想让它们更具视觉吸引力。我认为使用jQuery模拟计数达到这个数字可能会很酷。

所以在页面加载时，假设数字是32.数字从0开始，最多计数到32，每个数字之间有一些延迟间隔。

enter image description here

我将如何做到这一点？这是我尝试过的代码，但它不起作用。它捕获页面上的数字（有3个statRibbons），但是它没有在视觉上计算我可以看到每个数字0,1,2,3等的位置。理想情况下，它会计算每个带1时间而不是同时，但如果它需要笨重的额外代码，那就没关系。无论如何，我认为.each应该照顾这个。

$(function() {
  $(".statRibbon .bigStat span").each(function() {
      var tmp = this.innerHTML;
      var i = 0;
      while(i != tmp) {
          $(".statRibbon .bigStat span").innerHTML(i++);
          alert(i);
      }
  });
});

Answer 1

这对你有什么用？

http://jsfiddle.net/WpJxn/1/

更改setTimeout函数末尾的50以更改以毫秒为单位计算的速度。

Answer 2

Id用setInterval

替换整个

$(function() {
    $(".statRibbon .bigStat span").each(function() {
        var that = $(this),
            tmp = that.html(),
            i = 0,
            interval;

        that.html(0);
        interval = setInterval(function() {
            that.html(++i);
            if (i === +tmp) clearInterval(interval);
        }, 50);
    });
});

Answer 3

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

// 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计数数字具有一定的限制，计数时间和计数增量。

Answer 4

在我看来，在你提醒号码之前或之后你需要某种睡眠或延迟。试试setTimeout方法。

您可以在此处找到此问题的更多信息：Jquery: how to sleep or delay?

在页面加载时直观地计算数字

4 个答案: