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 - 为页面重新加载存储倒计时时间的最后期限

回答

相关问题