JavaScript腳本計時器問題

我正在嘗試倒數計時器。我設法做一個，但這個問題是關閉瀏覽器時停止。所以當用戶重新訪問我的網站時，它會重新啓動。我想要的是保持這個計時器。 例如，如果用戶在計時器22:14:09離開我的站點。所以計時器將繼續。假設用戶在一小時後重新訪問我的網站，所以時間應該是21:14:09。我該怎麼做？JavaScript腳本計時器問題

這裏是我的JS

$(function() { 
var hrs, mins, secs, TimerRunning, TimerID, 
    Timer = { 
     init: function() { 
      hrs   = 23; 
      mins   = 59; 
      secs   = 59; 
      TimerRunning = false; 
      Timer.StopTimer(); 
      Timer.StartTimer(); 
     }, 

     StopTimer: function() { 
      if(TimerRunning) 
       clearTimeout(TimerID); 
      TimerRunning=false; 
     }, 

     StartTimer: function() { 
      TimerRunning = true; 
      $('.timer').html(Timer.Pad(hrs) + ":" + Timer.Pad(mins) + ":" + Timer.Pad(secs)); 
      TimerID = self.setInterval("StartTimer()", 1000); 

      if(hrs == 0 && mins == 0 && secs == 0) 
       StopTimer(); 

      if (secs == 0) { 
       mins--; 
       secs = 59; 
      } 
      if (mins == 0) { 
       hrs--; 
       mins = 59; 
      } 
      secs--; 
      setTimeout(function() { Timer.StartTimer(); }, 1000); 
     }, 

     Pad: function (number) { 
      if(number < 10) 
       number = 0+""+number; 
      return number; 
     } 

    }; 

Timer.init(); 
});

更新

DEMO

來源

2012-10-31 2619

移動定時器到服務器側。 –

你能詳細解釋一下你的答案嗎？ – 2619

這裏不需要任何服務器。只需在頁面卸載上設置cookie即可。 – dfsq

你可以在時間存儲在LocalStorage，這將是跨瀏覽器重新啓動持久。

在如

localStorage["mytimer"] = JSON.stringify([hrs, mins, secs]);

簡單你的情況應該的東西儲存工作，你可以做

var previousTime = JSON.parse(localStorage["mytimer"]);

檢索以前的值。

您可以在這裏閱讀更多關於它的信息：http://diveintohtml5.info/storage.html。

來源

2012-10-31 08:05:03 GiantSquid

請參閱我更新的文章，用斜體表示。這就是我想要的 – 2619

@ al0ne只是在本地存儲中花費的時間而不是當前時間。 'localStorage [「timeSpent」] = JSON.stringify（[hrsSpent，minsSpent，secsSpent]）' – Bruno

@Bruno我加了這兩行，但仍然不按照我想要的方式工作'localStorage [「mytimer」] = JSON.stringify （[小時，分鐘，秒]）; \t \t \t var previousTime = JSON.parse（localStorage [「mytimer」]）; \t \t \t //$('.timer').html(Timer.Pad(hrs）+「：」+ Timer.Pad（mins）+「：」+ Timer.Pad（secs））; \t \t \t $（'。timer'）。html（previousTime）;' – 2619

您可以修改您的StartTimer函數，以便每次調用本地時間戳（new Date）時都可以保存在cookie或localStorage中。另外，setTimeout不是很可靠，你應該隨時調整實時時間計數。

來源

2012-10-31 08:31:11 Need4Steed

這是我對這個問題的解決方案。

// use hours, minutes & seconds to set time limit 
var hours = 1, 
    minutes = 30, 
    seconds = 0, 
    maxTime = ((hours * 3600) + (minutes * 60) + seconds) * 1000, 
    // if timeleft not in localStorage then default to maxTime 
    timeLeft = (localStorage.timeLeft || maxTime), 
    startTime = new Date(), 
    intervalRef; 

// check if user has already used up time 
if(timeLeft > 0) { 

    intervalRef = setInterval(setTimeLeft, 5000); 
} else { 

    stopTrackingTime(); 
} 

function setTimeLeft() { 

    // if user has used up time exit 
    if(localStorage.timeLeft < 0) { 

     stopTrackingTime(); 
    } 

    // calculate how long user has left 
    var elapsed = (new Date() - startTime); 
    localStorage.timeLeft = timeLeft - elapsed; 
}; 

// function called once user has used up time 
function stopTrackingTime() { 

    clearInterval(intervalRef); 
    alert("end of time allowed"); 
}

小提琴here

來源

2012-10-31 11:49:32 Bruno

JavaScript腳本計時器問題

回答

相關問題