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

這篇文章將為大家詳細(xì)講解有關(guān)如何使用jQuery+localStorage實(shí)現(xiàn)計(jì)時器，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供臨江企業(yè)網(wǎng)站建設(shè),專注與成都做網(wǎng)站、成都網(wǎng)站建設(shè)、HTML5、小程序制作等業(yè)務(wù)。10年已為臨江眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。

原型

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

需求

       1.關(guān)閉瀏覽器時時間繼續(xù)運(yùn)行

      2.刷新時保持當(dāng)前狀態(tài)

      3.結(jié)束時間保存在客戶端

示例代碼

 <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> 
 // Stopwatch
var stopwatchInterval = 0; // The interval for our loop.循環(huán)的間隔。 
var stopwatchClock = $(".container.stopwatch").find(".clock"),
 stopwatchDigits = stopwatchClock.find('span');
// 檢查前一個會話是否在秒表運(yùn)行時結(jié)束。 
// 如果是的話，按時間重新開始。 
//即 關(guān)閉瀏覽器，點(diǎn)擊開始，在后臺保持計(jì)時的狀態(tài)
if(Number(localStorage.stopwatchBeginingTimestamp) && Number(localStorage.stopwatchRunningTime)){
 var runningTime = Number(localStorage.stopwatchRunningTime) + new Date().getTime() - Number(localStorage.stopwatchBeginingTimestamp);
 localStorage.stopwatchRunningTime = runningTime;
 startStopwatch();
}
//如果前一個會話有運(yùn)行時間，就把它寫在時鐘上。
// 如果沒有初始化為0。 
//即結(jié)束時不可刷新
if(localStorage.stopwatchRunningTime){
 
 stopwatchDigits.text(returnFormattedToMilliseconds(Number(localStorage.stopwatchRunningTime)));
 
}
else{
 localStorage.stopwatchRunningTime = 0;
}
 /* 實(shí)現(xiàn)開始結(jié)束 */
 $("#stopwatch-btn-start").toggle(function() {
  $(this).text ('開始').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ù)的時鐘秒表
/*stopwatchClock.on('click',function(){
 if(stopwatchClock.hasClass('inactive')){
 startStopwatch()
 }
 else{
 pauseStopwatch();
 }
});*/
/*開始計(jì)時*/
function startStopwatch(){
 // 防止多個間隔同時進(jìn)行。 
 clearInterval(stopwatchInterval);
 var startTimestamp = new Date().getTime(),
 runningTime = 0;
 localStorage.stopwatchBeginingTimestamp = startTimestamp;
 // 應(yīng)用程序還記得上一次會話運(yùn)行了多長時間。 
 if(Number(localStorage.stopwatchRunningTime)){
 runningTime = Number(localStorage.stopwatchRunningTime);
 }
 else{
 localStorage.stopwatchRunningTime = 1;
 }
 // 每隔100ms重新計(jì)算運(yùn)行時間，計(jì)算公式是 
 // 當(dāng)你上次啟動時鐘+上次運(yùn)行時間 
 stopwatchInterval = setInterval(function () {
 var stopwatchTime = (new Date().getTime() - startTimestamp + runningTime);
 stopwatchDigits.text(returnFormattedToMilliseconds(stopwatchTime));
 }, 100);
 stopwatchClock.removeClass('inactive');
}
/*停止計(jì)時*/
function pauseStopwatch(){
 // 停止計(jì)時 
 clearInterval(stopwatchInterval);
 if(Number(localStorage.stopwatchBeginingTimestamp)){
 // 計(jì)算運(yùn)行時間。 
 // 新的運(yùn)行時間=上次運(yùn)行時間+現(xiàn)在-最后一次啟動 
 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>

關(guān)于“如何使用jQuery+localStorage實(shí)現(xiàn)計(jì)時器”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

本文題目：如何使用jQuery+localStorage實(shí)現(xiàn)計(jì)時器
網(wǎng)站鏈接：http://www.muchs.cn/article0/ihpeoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、移動網(wǎng)站建設(shè)、建站公司、響應(yīng)式網(wǎng)站、Google、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

小程序開發(fā)