时间戳

首页 > 解决方案 > Javascrip 倒计时计时器：防止在页面重新加载时重置

javascript - Javascrip 倒计时计时器：防止在页面重新加载时重置

问题描述

我有一个从 15 计数到 0 的分钟计时器。我不想在页面重新加载时重置（= 重新启动）计时器。但我不知道如何防止计时器在页面重新加载时重置。我在 php 中使用 javascript。我试图将加载计时器时间添加到 php 会话，但这对我不起作用。有什么建议么？谢谢你 ：）

function startTimer() {
    setTimeout('timer()', 60);
}

  var continueMins = localStorage.getItem("continueMins");
  var continueSecs = localStorage.getItem("continueSecs");
  
  if (continueMins == 'true') {
    mins = continueMins;
  } else {
    mins = 15;
  }

  if (continueSecs == 'true') {
    secs = continueSecs;
  } else {
    secs = mins * 60;
  }

  function timer() {
    if (document.getElementById) {
        minutes = document.getElementById("minutes");
        seconds = document.getElementById("seconds");
        progressBar = document.getElementById("progressBar");
        timerContainer = document.getElementById("timer-container");
        expired = document.getElementById("expired");
        btcAmount = document.getElementById("btcAmount");
        btcAddress = document.getElementById("btcAddress");

        window.onbeforeunload = function() {
            localStorage.setItem("continueMins", getMinutes());
            localStorage.setItem("continueSecs", getSeconds());
        }

        var totalSeconds = 15 * 60, remainingSeconds = getMinutes() * 60 + getSeconds();

        progressBar.style.width = (remainingSeconds * 100 / totalSeconds) + "%";

        minutes.innerHTML = getMinutes() < 10 ? "0" + getMinutes() : getMinutes();
        seconds.innerHTML = getSeconds() < 10 ? "0" + getSeconds() : getSeconds();

        if (mins < 1) { 
            minutes.classList.add("text-danger");
            seconds.classList.add("text-danger");
        }

        if (mins < 0) {
            expired.style.display = 'block';
            timerContainer.style.display = 'none';
            btcAmount.text = 'Expired';
            btcAddress.text = 'Payment Window Expired';
            localStorage.removeItem("continueMins");
            localStorage.removeItem("continueSecs");
        } else {
            secs--;
            setTimeout('timer()', 1000);
        }

    }
}

function getMinutes() {
    mins = Math.floor(secs / 60);
    return mins;
}

function getSeconds() {
    return secs - Math.round(mins * 60);
}

startTimer();
<p class="font-18 font-500"><span id="minutes"></span> : <span id="seconds"></span></p>

标签： javascriptphpdatetime

解决方案

您可以使用 localStorage（sessionStorage 也是一个选项，但如果用户例如在新选项卡中重新连接或重新启动浏览器，则更容易重新启动计时器）
如何在保存端进行操作（崩溃，意外行为，例如您应该更新不时在本地存储中经过的时间。通过检​​查相应的事件来处理“正常”情况：

var aTimer, bool;
window.onbeforeunload = function (e) {
    if (bool) return;
    aTimer = setTimeout(function () {
       bool = true;
    localStorage.setItem("resetTimer", "false");      
    localStorage.setItem("currentTimer", MY_TIMER_VAR);
    localStorage.setItem("sessionDate", MY_NEW_SESSION_VAR);
 }, 500);
 return ; 
};

编辑如果您希望经过的计时器在 24 小时内有效，您还必须放置 MY_NEW_SESSION_VAR 这是一个 Date.now() 在重新加载时转换为小时，您检查 TODAY_DATETIME_IN_HOURS 这是一个 Date.now() 转换为小时（这是我的用例，如果您不需要它，请忽略它）

键和值始终是字符串（请注意，与对象一样，整数键将自动转换为字符串）。
启动程序（加载 js）时，您应该检查变量：

 var resetTimer = localStorage.getItem("resetTimer");
 var sessionDate = localStorage.getItem("sessionDate");  
 if (resetTimer == "true" || sessionDate > (TODAY_DATETIME_IN_HOURS - 24) ){ // start timer }

删除单个项目

 localStorage.removeItem("sessionDate");

如果您想使用 sessionStorage，只需将 localStorage 替换为 sessionStorage
编辑OP 测试的完整代码并按要求工作

var countDownTarget;

if (document.readyState!="loading") docReady();
/* Modern browsers */
else document.addEventListener("DOMContentLoaded", docReady);
function docReady() {
  countDownTarget = parseInt(localStorage.getItem("countDownTarget"));
 console.debug("Initvalue: " + countDownTarget);
 if (isNaN(countDownTarget) == true || countDownTarget == "" || countDownTarget <= 0){  // If not defined
    countDownTarget = new Date().getTime() + 15 * 60 * 1000;
    console.debug("is NaN sInitvalue: " + countDownTarget);
  //Update the count down every 1 second
   setInterval(countDown, 1000);
    } else {
    console.debug("else Initvalue: " + countDownTarget);
    setInterval(countDown, 1000);
    }
}

window.onbeforeunload = function() {
    localStorage.setItem("countDownTarget", countDownTarget);
};

// Functions you call
function countDown(){
    var now = new Date().getTime();  
    //console.debug("now " + now);  
    var distance = countDownTarget - now;
    console.debug("distance " + distance);
    var mins = distance < 0 ? 0 : Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var secs = distance < 0 ? 0 : Math.floor((distance % (1000 * 60)) / 1000);        
/** Add a zero in front of numbers<10 */
    mins = prependZero(mins);
    secs = prependZero(secs);
 // Output the results
    document.getElementById("minutes").innerHTML = mins;
    document.getElementById("seconds").innerHTML = secs;

    if (distance <= 0) {
 //   clearInterval(x);
    localStorage.removeItem("countDownTarget");
    clearInterval(countDown); 
    }

}

function prependZero(i){
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}

在脚本标签之间复制或加载为 *.js 文件

推荐阅读