前言
在HTML5中，新加入了一個localStorage特性，這個特性主要是用來作為本地存儲來使用的，解決了cookie存儲空間不足的問題(cookie中每條cookie的存儲空間為4k)，localStorage中一般瀏覽器支持的是5M大小，這個在不同的瀏覽器中localStorage會有所不同。
本文主要介紹了關于jQuery+localStorage實現簡易計時器的相關內容，分享出來供大家參考學習，下面話不多說了，來一起看看詳細的介紹吧。
原型
需求
1.關閉瀏覽器時時間繼續運行
2.刷新時保持當前狀態
3.結束時間保存在客戶端
示例代碼
<div class="wrapper"> <div class="app"> <div class="container stopwatch"> <div class="clock inactive z-depth-1"> <span>0:00:00</span> <!-- <div class="overlay waves-effect"></div>--> </div> <form> <a id="stopwatch-btn-start" class="waves-effect waves-teal btn-flat">開始</a> </form> </div> </div> </div>
<script> // Stopwatchvar stopwatchInterval = 0; // The interval for our loop.循環的間隔。 var stopwatchClock = $(".container.stopwatch").find(".clock"), stopwatchDigits = stopwatchClock.find('span');// 檢查前一個會話是否在秒表運行時結束。 // 如果是的話，按時間重新開始。 //即 關閉瀏覽器，點擊開始，在后臺保持計時的狀態if(Number(localStorage.stopwatchBeginingTimestamp) && Number(localStorage.stopwatchRunningTime)){ var runningTime = Number(localStorage.stopwatchRunningTime) + new Date().getTime() - Number(localStorage.stopwatchBeginingTimestamp); localStorage.stopwatchRunningTime = runningTime; startStopwatch();}//如果前一個會話有運行時間，就把它寫在時鐘上。// 如果沒有初始化為0。 //即結束時不可刷新if(localStorage.stopwatchRunningTime){ stopwatchDigits.text(returnFormattedToMilliseconds(Number(localStorage.stopwatchRunningTime))); }else{ localStorage.stopwatchRunningTime = 0;} /* 實現開始結束 */ $("#stopwatch-btn-start").toggle(function() { $(this).text ('開始').css("background", "#3bb4f2"); if(stopwatchClock.hasClass('inactive')){ startStopwatch() } }, function() { $(this).text ('結束').css("background", "red"); pauseStopwatch(); }) // Pressing the clock will pause/unpause the stopwatch.//按下暫停/恢復的時鐘秒表/*stopwatchClock.on('click',function(){ if(stopwatchClock.hasClass('inactive')){ startStopwatch() } else{ pauseStopwatch(); }});*//*開始計時*/function startStopwatch(){ // 防止多個間隔同時進行。 clearInterval(stopwatchInterval); var startTimestamp = new Date().getTime(), runningTime = 0; localStorage.stopwatchBeginingTimestamp = startTimestamp; // 應用程序還記得上一次會話運行了多長時間。 if(Number(localStorage.stopwatchRunningTime)){ runningTime = Number(localStorage.stopwatchRunningTime); } else{ localStorage.stopwatchRunningTime = 1; } // 每隔100ms重新計算運行時間，計算公式是 // 當你上次啟動時鐘+上次運行時間 stopwatchInterval = setInterval(function () { var stopwatchTime = (new Date().getTime() - startTimestamp + runningTime); stopwatchDigits.text(returnFormattedToMilliseconds(stopwatchTime)); }, 100); stopwatchClock.removeClass('inactive');}/*停止計時*/function pauseStopwatch(){ // 停止計時 clearInterval(stopwatchInterval); if(Number(localStorage.stopwatchBeginingTimestamp)){ // 計算運行時間。 // 新的運行時間=上次運行時間+現在-最后一次啟動 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>總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
