2

ページの同じ場所に JavaScript でカウンタを継続的に印刷する方法はありますか?

for(var x=0; x<3000; x++){
    document.write(x + '</br>');
    document.body.innerHTML = "";
}

数値 x を更新して前の数値を置き換えたいのですが、このコードは数値を表示する前にループが終了するまで待機しているようです (それまでには手遅れです)

番号 x を出力し、100 ミリ秒待機し、同じスペースで x の新しい値をクリアして更新し、繰り返す方法はありますか?

(私はinnerHTML、ページ全体を殺していることを知っています。今のところ、このページで実行する必要があるのはカウンターを実行することだけなので、他の要素は無関係です。私が望んでいないのは、これらすべての数値の印刷リストであり、遅延が必要です。 )

ありがとう！

4

3 に答える 3

4

JavaScript の実行中は、ブラウザーは表示を更新しません。タイマーを実行するにはsetTimeout()、 またはを使用する必要がありますsetInterval()。また、document.write()使用する正当な理由がない限り、使用しないでください (正当な理由がわからない場合は、使用しないでください)。

次のようなものが必要です。

<body>
   <div id="counter"></div>
</body>

それで：

window.onload = function() {
    var x = 0,
        max = 3000,
        ctr = document.getElementById("counter");

    function incrementCounter() {
       ctr.innerHTML = x;
       if (x++ < max)
           setTimeout(incrementCounter, 100);
    }

    incrementCounter();
}

デモ: http://jsfiddle.net/nnnnnn/v5hmE/

上記は「カウンター」div のコンテンツのみを更新するため、ページ上の他の要素は影響を受けないことに注意してください。

宿題: そのコードで理解できなかったものはすべて Google で検索してください。

于 2012-08-09T03:42:54.267 に答える
1

はい！そのために、次の 2 点をお勧めします。

  1. その目的でコンテナ（divとしましょう）を使用するには：

    そしてそれを次のように参照しますdocument.getElementById('counter').innerHTML = x

  2. 更新前にJavaScript タイマーを使用するには。

それが役立つことを願って、

于 2012-08-09T03:41:01.830 に答える
1

...however this code seems to wait until the loop is finished before showing a number...

Don't use a for loop for this. You need a specific interval like you say. Use a function with a setTimeout and some recursion:

var x = 0;
var speed = 100;
function update() {
  if (x <= 3000) {
    setTimeout(function() {
      // update DOM here
      x++; 
      update();
    }, speed);
  } else {
    return false;
  }
}

Demo: http://jsfiddle.net/elclanrs/PRC9R/

You can change the interval to say 9 so it looks believable but goes faster.

x += 9; // instead of x++
于 2012-08-09T03:45:04.503 に答える