2

次の方法でタイマーを作成してみてください。

HTML:

<div id="timer">
     <span id="minute" class="dis">00</span> :
     <span id="second" class="dis">00</span> :
     <span id="milisecond" class="dis">00</span>
 </div>

 <input type="button" value="Start/Stop" id="startStop" />
 <input type="button" value="Reset" id="reset" />

jQuery:

 var a = false,
         t = null,
         ms = 0,
         s = 0,
         m = 0,
         dl = 10,
         now = null,
         before = new Date(),
         El = function(id) { return document.getElementById(id);};

     function dsp() {
         if(ms++ == 99){
              ms = 0;
             if(s++ == 59) {
                 s = 0;
                 m++;
             } else s = s;
         } else ms = ms;    
         El('milisecond').innerHTML = ms
         El('second').innerHTML = s < 10 ? '0' + s : s;
         El('minute').innerHTML = m < 10 ? '0' + m : m;
     }

     function r() {
         a = true;
         var els = document.getElementsByClassName('dis');
         ms = s = m = 0;
         sw();        
         for(var i in els)  {
             els[i].innerHTML = '00';    
         }
     }

     function sw() {
         a ? clearInterval(t) : t = setInterval(dsp, dl);
         a = !a;
     }
     El('startStop').addEventListener('click', sw, true);
     El('reset').addEventListener('click', r, true);

それはうまく動作します。しかし問題は、ウィンドウの切り替えやタブの変更が発生したときに実行が停止することです。この質問を送信する前に、このスレッドを読みましたが、スニペットに実装できませんでした。

解決策や提案を手伝ってください..

ここにフィドルがあります

4

1 に答える 1

2

開始時刻をキャプチャし（Marcのコメントを参照）、以前の実行を追跡します（offset）：

var a = false;
var dl = 10;
var El = function(id) { return document.getElementById(id);};
var start = null; // starting time of current measurement
var offset = 0;   // offset for previous measurement

function dsp() {
    var tmp = new Date(new Date() - start + offset ); // calculate the time
    var ms = tmp.getMilliseconds();
    var m = tmp.getMinutes();
    var s = tmp.getSeconds();
    El('milisecond').innerHTML = ms;
    El('second').innerHTML = s < 10 ? '0' + s : s;
    El('minute').innerHTML = m < 10 ? '0' + m : m;
}

function r() {
    a = true;
    var els = document.getElementsByClassName('dis');    
    sw();
    offset = 0; // Clear the offset
    for(var i in els)  {
        els[i].innerHTML = '00';    
    }
}

function sw() {
    if(a){
    // If the timer stops save the current value
        offset += (new Date()) - start;
    }else
        start = new Date();
    a ? clearInterval(t) : t = setInterval(dsp, dl);
    a = !a;
}
document.getElementById('startStop').addEventListener('click', sw, true);
document.getElementById('reset').addEventListener('click', r, true);

JSFiddle

于 2012-04-22T18:04:52.557 に答える