0

0から始まる数字でアニメーションを作りたいのですが、一定時間で3000としましょう。

したがって、指定されたミリ秒の時間で3000に達するまで、0から3000までのすべての数値が表示されます。

その手がかりはありますか？

編集

100万のような終了番号がある場合、その間のすべての番号を確認するのは苦痛かもしれません。したがって、より速く到達するためにいくつかの数値をスキップすることによって、最終数値に到達するものかもしれません。それは解決策でしょうか？

4

4 に答える 4

2

このsetIntervalメソッドを使用して、設定された間隔でコードを実行できます。これは、48000ミリ秒で最大3000までカウントされます。

var cnt = 0;
var timer = window.setInterval(function(){
  cnt++;
  document.getElementById('display').innerHTML = cnt;
  if (cnt == 3000) {
    window.clearInterval(timer);
  }
}, 16);

デモ： http： //jsfiddle.net/Guffa/5grSA/

注：60 Hzは、画面（たとえば、ほとんどのLCDディスプレイ）の一般的な更新周波数です。すべての数値を実際に画面に表示したい場合は、16ミリ秒ごとよりも頻繁に数値を変更することはできません。数値をより速くカウントしたい場合は、時間を短く設定しても意味がありません。たとえば、10番目ごとの数値のみを表示して、4800ミリ秒で実行するようにいくつかの数値をスキップします。

cnt += 10;
于 2012-10-11T14:59:26.753 に答える
2

setIntervalをjsfiddleとして使用できます

var i = 0, interval = 10;
    var t = setInterval(function(){
           if(i == 3000 ) clearInterval(t);
          document.body.innerHTML = i++;
    }, interval );​
于 2012-10-11T14:50:44.147 に答える
1

カウンターの変数を作成し、setIntervalを使用して関数を呼び出し、カウンターをインクリメントし、現在の値をDOMに書き込みます。

于 2012-10-11T14:49:16.363 に答える
0

Shuslの回答とコメントに基づいて：

function AnimateCount(CountTo, MSTime, FPS) {
    var MSPerFrame = (1000 / FPS);
    var step = (CountTo / (MSTime / MSPerFrame));
    var Value = 0;
    var Timer = setInterval(
        function() {
            Value += step;
            if(Value >= CountTo)
            {
                clearInterval(Timer);
                Value = CountTo;
            }
            document.body.innerHTML = Math.round(Value);
        },
        MSPerFrame
    );
}

AnimateCount(100000, 2000, 60);

http://jsfiddle.net/kMjrM/1/

于 2012-10-11T15:27:55.147 に答える