5

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

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

在此处输入图像描述

我将如何做到这一点？这是我尝试过的代码，但它不起作用。它捕获页面上的数字（有 3 个 statRibbons），但它并没有在视觉上进行计数，我可以看到每个数字 0、1、2、3 等。理想情况下，它会在一个time 而不是同时，但如果它需要大量的额外代码，那没关系。.each 无论如何都应该处理这个问题，我想。

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

4 回答 4

10

这对你有什么作用？

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

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

于 2013-01-03T17:57:48.967 回答
3

我会用 setInteval 替换 while

$(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);
    });
});​
于 2013-01-03T18:03:30.843 回答
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 对页面加载的计数有一定的限制、计数时间和计数增量。

于 2013-10-22T15:33:55.117 回答
1

在我看来，在您提醒号码之前或之后，您需要在循环中进行某种睡眠或延迟。试试setTimeout方法。

您可以在此问题中找到更多信息：Jquery：如何睡眠或延迟？

于 2013-01-03T17:53:45.440 回答