0

各読み込みページで 0 からカウントを開始するカウントアップ タイマー JS コードを実装したいと思います。現在のコードは次のようになります。

var secondsTotal = 0;

setInterval(function() {
    ++secondsTotal;
    var minutes = Math.floor(secondsTotal / 60);
    var seconds = Math.floor(secondsTotal)  % 60;
    var milliseconds = Math.floor(secondsTotal) % 1000;

    document.getElementById('counter').innerHTML = minutes + ":" + seconds + "." + milliseconds;
}, 1000);

出力形式は次のとおりです。00:00.0

mm:ss.ms

では、上記の形式のような結果を出力するにはどうすればよいでしょうか (分と秒は 2 桁の形式で正確に出力する必要があります)。

4

2 に答える 2

3

ページごとに実行したい場合は、ほぼ完了です。setInterval現在、コードは毎秒実行されるため、ミリ秒を追跡することはできません。代わりに私がお勧めするのは次のようなものです：

(function() {
     var counter = 0,
     cDisplay = document.getElementById("counter");
     format = function(t) {
         var minutes = Math.floor(t/600),
             seconds = Math.floor( (t/10) % 60);
         minutes = (minutes < 10) ? "0" + minutes.toString() : minutes.toString();
         seconds = (seconds < 10) ? "0" + seconds.toString() : seconds.toString();
         cDisplay.innerHTML = minutes + ":" + seconds + "." + Math.floor(t % 10);
     };
    setInterval(function() {
       counter++;
       format(counter);
    },100);
})();

これにより、コードを 1 秒あたり 10 回実行できるようにするために、いくつかのことが行われます。

  • 出力要素#counterはキャッシュされ、反復ごとに取得されるわけではありません
  • 書式設定は算術演算 (モジュロと除算) のみに保持されます。

これにより、先行ゼロも追加されます。

このカウンターをページごとに実行し続けたい場合は、document.cookiesページからページへ最終的な値を渡すために使用することを検討してください。

フィドル

これは、優れた最初のバージョンとして機能します。ただし、次のことが必要な場合があります。

  • タイマーを一時停止/再開する
  • タイマーをリセットする
  • 複数のタイマーを持つ

このため、上記のコードに少し複雑な形式を追加して、複数のタイマーを管理できるようにします。これは、いくつかのオブジェクト指向の概念を利用します。オブジェクトを使用しTimerManagerてタイマーを「ホスト」し、各Timerオブジェクトにはマネージャーへのリンクがあります。

この理由は、複数の呼び出しsetInterval()を行うのではなく、このようにすることですべてのタイマーが同じものに依存するためです。setInterval()これにより、無駄なクロック サイクルを削減できます。

これについては、約 5 分で詳しく説明します。

于 2013-05-30T14:03:54.297 に答える