5

私のページには番号付きの統計がいくつかあり、もう少し視覚的に魅力的なものにしたいと考えています。jQuery を使用して、その数までのカウントをシミュレートするのはクールかもしれないと思いました。

したがって、ページの読み込み時に、数値が 32 であるとします。数値は 0 から始まり、32 までカウントされ、各数値の間に遅延間隔があります。

ここに画像の説明を入力

どうすればこれを達成できますか? これは私が試したコードですが、機能していません。ページ上の数字をキャプチャします (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);
      }
  });
});
4

4 に答える 4

10

これはどのように機能しますか?

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

setTimeout 関数の最後にある を変更50して、ミリ秒単位でカウントする速度を変更します。

于 2013-01-03T17:57:48.967 に答える
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 に答える
3

while を 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);
    });
});​
于 2013-01-03T18:03:30.843 に答える
1

番号を通知する前または後に、ループに何らかのスリープまたは遅延が必要なようです。方法を試してくださいsetTimeout。

この質問の詳細については、こちらを参照してください: Jquery: how to sleep or delay?

于 2013-01-03T17:53:45.440 に答える