jQuery+localStorage實(shí)現(xiàn)計(jì)時(shí)器

 <p class="wrapper">
 <p class="app">
 <p class="container stopwatch"> 
 <p class="clock inactive z-depth-1">
 <span>0:00:00</span>
 <!-- <p class="overlay waves-effect"></p>-->
 </p> 
 <form>
 <a id="stopwatch-btn-start" class="waves-effect waves-teal btn-flat">開(kāi)始</a>
 </form> 
 </p>
 </p>
 </p>

<script> 
 // Stopwatch
var stopwatchInterval = 0; // The interval for our loop.循環(huán)的間隔。 
var stopwatchClock = $(".container.stopwatch").find(".clock"),
 stopwatchDigits = stopwatchClock.find('span');
// 檢查前一個(gè)會(huì)話(huà)是否在秒表運(yùn)行時(shí)結(jié)束。 
// 如果是的話(huà)，按時(shí)間重新開(kāi)始。 
//即 關(guān)閉瀏覽器，點(diǎn)擊開(kāi)始，在后臺(tái)保持計(jì)時(shí)的狀態(tài)
if(Number(localStorage.stopwatchBeginingTimestamp) && Number(localStorage.stopwatchRunningTime)){
 var runningTime = Number(localStorage.stopwatchRunningTime) + new Date().getTime() - Number(localStorage.stopwatchBeginingTimestamp);
 localStorage.stopwatchRunningTime = runningTime;
 startStopwatch();
}
//如果前一個(gè)會(huì)話(huà)有運(yùn)行時(shí)間，就把它寫(xiě)在時(shí)鐘上。
// 如果沒(méi)有初始化為0。 
//即結(jié)束時(shí)不可刷新
if(localStorage.stopwatchRunningTime){
 stopwatchDigits.text(returnFormattedToMilliseconds(Number(localStorage.stopwatchRunningTime)));
}
else{
 localStorage.stopwatchRunningTime = 0;
}
 /* 實(shí)現(xiàn)開(kāi)始結(jié)束 */
 $("#stopwatch-btn-start").toggle(function() {
 $(this).text ('開(kāi)始').css("background", "#3bb4f2");
 if(stopwatchClock.hasClass('inactive')){
 startStopwatch()
 } 
 }, function() { 
 $(this).text ('結(jié)束').css("background", "red");
 pauseStopwatch();
 }) 
// Pressing the clock will pause/unpause the stopwatch.
//按下暫停/恢復(fù)的時(shí)鐘秒表
/*stopwatchClock.on('click',function(){
 if(stopwatchClock.hasClass('inactive')){
 startStopwatch()
 }
 else{
 pauseStopwatch();
 }
});*/
/*開(kāi)始計(jì)時(shí)*/
function startStopwatch(){
 // 防止多個(gè)間隔同時(shí)進(jìn)行。 
 clearInterval(stopwatchInterval);
 var startTimestamp = new Date().getTime(),
 runningTime = 0;
 localStorage.stopwatchBeginingTimestamp = startTimestamp;
 // 應(yīng)用程序還記得上一次會(huì)話(huà)運(yùn)行了多長(zhǎng)時(shí)間。 
 if(Number(localStorage.stopwatchRunningTime)){
 runningTime = Number(localStorage.stopwatchRunningTime);
 }
 else{
 localStorage.stopwatchRunningTime = 1;
 }
 // 每隔100ms重新計(jì)算運(yùn)行時(shí)間，計(jì)算公式是 
 // 當(dāng)你上次啟動(dòng)時(shí)鐘+上次運(yùn)行時(shí)間 
 stopwatchInterval = setInterval(function () {
 var stopwatchTime = (new Date().getTime() - startTimestamp + runningTime);
 stopwatchDigits.text(returnFormattedToMilliseconds(stopwatchTime));
 }, 100);
 stopwatchClock.removeClass('inactive');
}
/*停止計(jì)時(shí)*/
function pauseStopwatch(){
 // 停止計(jì)時(shí) 
 clearInterval(stopwatchInterval);
 if(Number(localStorage.stopwatchBeginingTimestamp)){
 // 計(jì)算運(yùn)行時(shí)間。 
 // 新的運(yùn)行時(shí)間=上次運(yùn)行時(shí)間+現(xiàn)在-最后一次啟動(dòng) 
 var runningTime = Number(localStorage.stopwatchRunningTime) + new Date().getTime() - Number(localStorage.stopwatchBeginingTimestamp);
 localStorage.stopwatchBeginingTimestamp = 0;
 localStorage.stopwatchRunningTime = runningTime;
 stopwatchClock.addClass('inactive');
 }
}
// 重置.
/*function resetStopwatch(){
 clearInterval(stopwatchInterval);
 stopwatchDigits.text(returnFormattedToMilliseconds(0));
 localStorage.stopwatchBeginingTimestamp = 0;
 localStorage.stopwatchRunningTime = 0;
 stopwatchClock.addClass('inactive');
}
*/
function returnFormattedToMilliseconds(time){
 var 
 seconds = Math.floor((time/1000) % 60),
 minutes = Math.floor((time/(1000*60)) % 60),
 hours = Math.floor((time/(1000*60*60)) % 24);
 seconds = seconds < 10 ? '0' + seconds : seconds;
 minutes = minutes < 10 ? '0' + minutes : minutes;
 return hours + ":" + minutes + ":" + seconds;
}
</script>