這次帶給大家jQuery+localStorage實作計時器,jQuery+localStorage實作計時器的注意事項有哪些,下面就是實戰案例,一起來看一下。
前言
在HTML5中,新加入了一個localStorage特性,這個特性主要是用來作為本地儲存來使用的,解決了cookie儲存空間不足的問題(cookie中每個cookie的儲存空間為4k),localStorage中一般瀏覽器支援的是5M大小,這個在不同的瀏覽器中localStorage會有所不同。
本文主要介紹了關於jQuery+localStorage實作簡易計時器的相關內容,分享出來供大家參考學習,下面話不多說了,來一起看看詳細的介紹吧。
原型
#需求
# 1.關閉瀏覽器時時間繼續運作
2.在更新時將目前使用狀態
3.結束時間在客戶端保存 # 3.結束時間在客戶端保存 #範例程式碼<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">开始</a> </form> </p> </p> </p>
<script> // Stopwatch var 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>
以上是jQuery+localStorage實作計時器的詳細內容。更多資訊請關注PHP中文網其他相關文章!