儘量讓像下面這樣一個計時器:的Javascript計時器問題
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);
它工作得很好。但問題是,當窗口切換或選項卡更改發生時,它會停止執行。在提交此問題之前,我閱讀this thread,但未能在我的代碼段中實現。
請幫我一些解決方案或建議..
這裏是fiddle
如果您只是捕獲開始時間,並且在每個時間間隔內計算不同從現在到開始時間之間。然後,在您切換後您的間隔是否正在運行並不重要,因爲只要間隔再次觸發,它就會保持最新。 – Marc 2012-04-22 17:49:44