如何製作可以在背景上運行的計時器？

我正在使用rails和書面的JavaScript代碼來顯示從00:00:00開始的計時器。如何製作可以在背景上運行的計時器？

[注：我有兩個按鈕開始和停止啓動定時器和停止定時器]

 

    function timer(){ 
    var sec, min, hour; 
    sec=0; 
    min=0; 
    hrs=0; 

    sec++; 

    if(sec>=60){ 
    min++; 
    sec=0; 
    } 

    if(min>=60){ 
    hrs++; 
    min=0; 
    } 

    document.getElementById("hrs").innerHTML=hrs; 
    document.getElementById("min").innerHTML=min; 
    document.getElementById("sec").innerHTML=sec; 

    setTimeout(timer(), 1000); 
    }

現在，這是在我的Rails Web應用程序工作正常。但是，如果我將重定向到另一個頁面並返回到此頁面，我將失去定時器值。

在這裏，我希望時鐘在頁面重定向後也連續運行。

如何解決這個問題？

來源

2013-07-24 przbadu

您可以使用[HTML 5 Storage]（http://www.w3schools.com/html/html5_webstorage.asp）來存儲計時器開始時的開始時間。然後在頁面加載中查找該值並重新計算打了多少時間 – musefan

因爲您正在重定向，所以java腳本定時器將不會執行此操作。您應該使用系統時間。您可以在從頁面重定向時從會話變量中獲取一些幫助，以便在定時器啓動時保存時間戳。

來源

2013-07-24 13:17:14 P5Coder

嘗試發送默認秒，分鐘和小時從服務器，例如值把他們保存在coockie中。

來源

2013-07-24 13:18:24 Enam

您可以使用會話或cookie設置變量sec, min, hour的初始值。並將此文件包含在您希望計時器應在後臺運行的所有頁面中。

function timer(){ 

sec++; 

if(sec>=60){ 
min++; 
sec=0; 
} 

if(min>=60){ 
hrs++; 
min=0; 
} 

setTimeout(timer(), 1000); 
}

然後只在您顯示計時器的頁面上將值添加到DOM。

來源

2013-07-24 13:19:18 abhidsm

得到時間戳...保存到某個地方，並把它作爲一個變量到下一個頁面

var start=new Date().getTime();

，以獲得時間的推移

var currentMillisecondsPassed=new Date().getTime()-start;

將它轉換爲hh:mm:ss.msec或什麼..

下一頁只需要start的值，並且有很多方法可以將它傳遞出去。 php，js，get，post ....和manymany more。

setTimeout()對定時器也不精確。

這裏是通過與查詢字符串值的例子..

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>timer</title> 
<script> 
window.onload=function(){ 
var pt=window.location.search.split('=')[1], 
e=document.body.childNodes, 
t=e[0], 
s=(pt*1||0), 
interval, 
ms2Time=function(a) { 
    var ms=parseInt((a%1000)/100), 
    s=parseInt((a/1000)%60), 
    m=parseInt((a/(1000*60))%60), 
    h=parseInt((a/(1000*60*60))%24); 
    return (h<10?'0'+h:h)+':'+(m<10?'0'+m:m)+':'+(s<10?'0'+s:s)+'.'+ms; 
}, 
Start=function(){ 
    s=new Date().getTime(); 
    interval=window.setInterval(getcurrent,100); 
}, 
Stop=function(){ 
    window.clearInterval(interval); 
    s=0; 
}, 
getcurrent=function(){ 
    t.textContent=ms2Time(new Date().getTime()-s); 
}, 
changepage=function(){ 
    window.location='?start='+s; 
}; 
e[1].addEventListener('click',Start,false); 
e[2].addEventListener('click',Stop,false); 
e[3].addEventListener('click',changepage,false); 
if(pt&&pt!=0){ 
    interval=window.setInterval(getcurrent,100); 
} 
} 
</script> 
</head> 
<body><div id="timer"></div><button>start</button><button>stop</button><button>anotherpage</button></body> 
</html>

正如我所說的......你可以隨時隨地存儲起始值...因此，如果您有任何偏好...只是告訴我我可以更改你的代碼。

來源

2013-07-24 13:20:13 cocco

非常感謝您的幫助。它真的幫助我 – przbadu

如何製作可以在背景上運行的計時器？

回答

相關問題