JavaScript - 爲頁面重新加載存儲倒計時時間的最後期限

因此，我在這裏創建了一個10分鐘的倒數計時器，在按下「開始」按鈕時啓動。我想存儲這個倒計時，以便當用戶離開頁面並返回時，倒計時仍將繼續。請注意，我不希望倒計時停止，然後繼續在頁面重新加載時停止，我希望它繼續到指定的截止日期。有什麼建議麼？JavaScript - 爲頁面重新加載存儲倒計時時間的最後期限

<html> 
<head> 

</head> 
<body> 



    <a id="sendButton" class="button" onclick=" startClock();">START</a> 

     <div id="sectionClock"> 

     <div id="clockdiv"> 
      <div> 
       <span class="hours"></span> 
       <div class="smalltext">Hours</div> 
      </div> 
      <div> 
       <span class="minutes"></span> 
       <div class="smalltext">Minutes</div> 
      </div> 
      <div> 
       <span class="seconds"></span> 
       <div class="smalltext">Seconds</div> 
      </div> 
     </div> 
    </div> 

    <script> 
function getTimeRemaining(endtime) { 
    var t = Date.parse(endtime) - Date.parse(new Date()); 
    var seconds = Math.floor((t/1000) % 60); 
    var minutes = Math.floor((t/1000/60) % 60); 
    var hours = Math.floor((t/(1000 * 60 * 60)) % 24); 
    return { 
     'total': t, 
     'hours': hours, 
     'minutes': minutes, 
     'seconds': seconds 
    }; 
} 
var flag = 0; 

function startClock() { 


    /************ INITIALIZE CLOCK ************/ 
    function initializeClock(id, endtime) { 

     // If countdown time is 0 then operate 
     if(flag==0) 
     { 
      var clock = document.getElementById(id); 
      var hoursSpan = clock.querySelector('.hours'); 
      var minutesSpan = clock.querySelector('.minutes'); 
      var secondsSpan = clock.querySelector('.seconds'); 

     flag=1; 
     } 


     function updateClock() { 
      var t = getTimeRemaining(endtime); 


      hoursSpan.innerHTML = ('0' + t.hours).slice(-2); 
      minutesSpan.innerHTML = ('0' + t.minutes).slice(-2); 
      secondsSpan.innerHTML = ('0' + t.seconds).slice(-2); 

      if (t.total <= 0) { 
       clearInterval(timeinterval); 
       flag=0; 
      } 
     } 

     updateClock(); 
     var timeinterval = setInterval(updateClock, 1000); 
    } 

    var timeInMinutes = 10; 
    var currentTime = Date.parse(new Date()); 
    var deadline = new Date(currentTime + timeInMinutes*60*1000); 
    initializeClock('clockdiv', deadline); 

    document.cookie = deadline 

    var cookie = document.cookie; 

    console.log(cookie); 

} 

function sendTrack(){ 
    (function() { 

     var trackUrl = document.getElementById("url");  

    }()); 
} 

    </script> 

</body> 
</html>

來源

2016-05-05 mellows

您應該使用'var currentTime = Date.now（）'或'var currentTime = new Date（）。getTime（）'來代替'var currentTime = Date.parse（new Date（））'。 – RobG

on the button click - 設置時間，然後將其存儲到localStorage中。這將存儲倒計時的開始時間。

var designatedStart_time = //time that the button was clicked; 
localStorage.setItem('startTime',designatedStart_time);

然後在頁面加載（或文檔就緒）時添加一個函數，確定當前時間。這可以與存儲的開始時間進行比較，然後可以計算差值並將其從倒數計時器中移除。然後倒計時可以在新的時間開始。請注意，存儲的值將是一個字符串，因此您需要解析它以將時間作爲數字。

$(document).ready(function(){ 
var startTime = localStorage.getItem('designatedStart_time'); 
var currentTime = //mechanism to get current time; 
var remainingTime = startTime - currentTime; 
//reset coundown to remainingTime 
})

例如，如果你在10:00設置的10分鐘，你有1分鐘的頁面上，你離開頁面，兩分鐘內返回，新coundown時間是從7:00 。

這樣，您不必存儲用戶在頁面上的時間長度或他們已離開多久 - 這只是當前時間減去指定的開始時間。

來源

2016-05-06 00:39:31 gavgrif

這裏是一個FIDDLE

的關鍵是初始掛鐘時間存儲在「開始時間」變量而不是隻計算「大限」時間的前面，然後將其存儲在會話存儲的情況下，你離開或重新加載頁面：

var timeStamp = Date.now(), // Set timeStamp to current wall clock time in ms 
    timeDelta; 

    // if startTime not set, put current timeStamp in session storage 
    // and set startTime to timeStamp 
    startTime = startTime || getSetStartTime(timeStamp);

之後，當更新所顯示的時間（和檢查計時器結束倒計時），減去當前進行增量（因爲存儲的起始時間經過的時間）掛鐘時間從開始時間：

timeDelta = timeStamp - startTime;

然後，如果增量大於最大倒計時時間時，只是顯示零剩餘時間，否則，顯示倒計時時間作爲總倒計時時間 - 時間增量：

if (timeDelta > timerMaxMS) { 
    // ... stuff 
    timeElem.value = msToTimeStr(0); // display zero time left 
    // ... stuff 
    return; // return, ending calling of countdown routine 
} 
timeElem.value = msToTimeStr(timerMaxMS - timeDelta); // Display time left 
requestID = window.requestAnimationFrame(updateTime); // call countdown routine via rAF at next repaint cycle

如果有一個在上次更新例程調用之後的暫停時間內，這並不重要，因爲您每次調用掛鐘時間都會抓取掛鐘時間，並且每次根據掛鐘時間正確計算時間增量，即使數分鐘自更新邏輯被調用以來已經過去了。我使用的是window.requestAnimationFrame()而不是setInterval（）。雖然它提供了時間戳參數，但它不是掛鐘時間，而是從導航開始的時間，因此時間將在重新加載時重置。 rAF更新瀏覽器的自然繪畫循環，因此定期更新動態更改UI元素的首選方法。

在getSetStartTime（）中，我首先嚐試從會話存儲獲取開始時間。如果它存在，我將它轉換爲一個整數並返回它。如果沒有，假設我沒有運行定時器或者顯示定時器已經完成，所以我使用timeStamp參數在會話存儲器中設置它（在將其轉換爲字符串之後），然後返回時間戳：

function getSetStartTime(timeStamp) { 
    var startTimeStr = sessionStorage.getItem('startTime'); 

    if (!startTimeStr) { 
    sessionStorage.setItem('startTime', String(timeStamp)); 
    return timeStamp; 
    } 
    return parseInt(startTimeStr, 10); 
}

還有一個clearStartTime（），它將startTime變量設置爲null，並從sessionStorage中刪除'startTime'鍵/值對。

如果邏輯使用會話存儲器包含開始時間鍵/值對，則會在頁面重新加載或導航時重新啓動倒數計時器。如果定時器處於停止狀態，並應表現出零和綠色的背景，等等，這樣的邏輯仍然可以工作，以反映上錄入（）的第一個（也是唯一一個）運行：

if (sessionStorage.getItem('startTime')) { 
    startTime = null; 
    labelElem.innerText = RUNNING_TEXT; 
    requestID = window.requestAnimationFrame(updateTime); 
}

的JavaScript ：

(function() { 
    'use strict'; 

    var FINISHED_COLOR = '#0f0', 
    DEFAULT_COLOR = '#fff', 
    RUNNING_TEXT = 'Countdown Time Left:', 
    STOPPED_TEXT = 'Countdown Finished!', 
    MS_PER_SEC = 1000, 
    MS_PER_MIN = MS_PER_SEC * 60, 
    timerMaxMS = 2 * MS_PER_MIN, 
    startTime, 
    requestID = null; 

    function getSetStartTime(timeStamp) { 
    var startTimeStr = sessionStorage.getItem('startTime'); 

    if (!startTimeStr) { 
     sessionStorage.setItem('startTime', String(timeStamp)); 
     return timeStamp; 
    } 
    return parseInt(startTimeStr, 10); 
    } 

    function clearStartTime() { 
    startTime = null; 
    sessionStorage.removeItem('startTime'); 
    } 

    function pad(num, digits) { 
    return String((num/Math.pow(10, digits)).toFixed(digits)).slice(-digits); 
    } 

    function msToTimeStr(timeInMS) { 
    var secs = Math.floor(timeInMS/MS_PER_SEC) % 60, 
     mins = Math.floor(timeInMS/MS_PER_MIN) % 60; 

    return pad(mins, 2) + ':' + pad(secs, 2) + '.' + pad(timeInMS % 1000, 3); 
    } 

    window.addEventListener('load', function() { 
    var startElem = document.getElementById('start'), 
     clearElem = document.getElementById('clear'), 
     timeElem = document.getElementById('time'), 
     labelElem = document.getElementById('label'), 
     idleText = labelElem.innerText; 

    function updateTime() { 
     var timeStamp = Date.now(), 
     timeDelta; 

     startTime = startTime || getSetStartTime(timeStamp); 
     timeDelta = timeStamp - startTime; 

     if (timeDelta > timerMaxMS) { 
     labelElem.innerText = STOPPED_TEXT; 
     timeElem.value = msToTimeStr(0); 
     timeElem.style.background = FINISHED_COLOR; 
     // clearStartTime(); 
     if (requestID) { 
      window.cancelAnimationFrame(requestID); 
      requestID = null; 
     } 
     return; 
     } 
     timeElem.value = msToTimeStr(timerMaxMS - timeDelta); 
     requestID = window.requestAnimationFrame(updateTime); 
    } 

    clearElem.addEventListener('click', function(event) { 
     event.preventDefault(); 
     if (requestID) { 
      window.cancelAnimationFrame(requestID); 
      requestID = null; 
     } 
     labelElem.innerText = idleText; 
     timeElem.value = ''; 
     timeElem.style.background = DEFAULT_COLOR; 
       clearStartTime(); 
     return false; 
    }); 

    startElem.addEventListener('click', function(event) { 
     event.preventDefault(); 
     clearStartTime(); 
     labelElem.innerText = RUNNING_TEXT; 
     timeElem.style.background = DEFAULT_COLOR; 
     requestID = window.requestAnimationFrame(updateTime); 
     return false; 
    }, false); 

    if (sessionStorage.getItem('startTime')) { 
     startTime = null; 
     labelElem.innerText = RUNNING_TEXT; 
     requestID = window.requestAnimationFrame(updateTime); 
    } 
    }, false) 
}());

HTML：

<form> 
    <fieldset> 
    <legend>Timer</legend> 
    <p> 
     <button id="start">Start Timer</button> 
     <button id="clear">Clear Timer</button> 
    </p> 
    <p> 
     <label for="time" id='label'>Timer Not Running</label> 
     <input type="text" name="time" id="time" readonly="true" /> 
    </p> 
    </fieldset> 
</form>

CSS：

label { 
    padding-right: 10px; 
    text-align: right; 
    display: inline-block; 
    width: 150px; 
} 

input { 
    width: 75px; 
    height: 20px; 
    text-align: right; 
    padding-right: 5px; 
    font-family: "Courier New"; 
}

來源

2016-05-06 04:41:38 Aeoril

JavaScript - 爲頁面重新加載存儲倒計時時間的最後期限

回答

相關問題