Question

嗨，我正在尝试使用120秒的倒数计时器，我已经硬编码了值和倒数及其时间

var timeleft = 120;
var downloadTimer = setInterval(function(){
  document.getElementById("countdown").innerHTML = timeleft + " seconds remaining";
  timeleft -= 1;
  if(timeleft <= 0){
    clearInterval(downloadTimer);
    document.getElementById("countdown").innerHTML = "Token expired";
  }
}, 1000);

<p id="countdown"></p>

工作正常，问题是如果我按下浏览器刷新按钮，则倒数计时又开始了，我该如何停止。我知道我必须使用本地存储或会话存储，我该如何实现呢？其他任何方式。下面是我的示例代码

var timeleft = 120;
var downloadTimer = setInterval(function(){
  document.getElementById("countdown").innerHTML = timeleft + " seconds remaining";
  timeleft -= 1;
  if(timeleft <= 0){
    clearInterval(downloadTimer);
    document.getElementById("countdown").innerHTML = "Token expired";
  }
}, 1000);

Answer 1

尝试使用localStorage

var timeleft = localStorage.getItem("key") ? localStorage.getItem("key") : 120;

var downloadTimer = setInterval(function(){
  document.getElementById("countdown").innerHTML = timeleft + " seconds remaining";
  localStorage.setItem("key", timeleft);
  timeleft -= 1;
  if(timeleft <= 0){
    clearInterval(downloadTimer);
    document.getElementById("countdown").innerHTML = "Token expired";
  }
}, 1000);

演示here

Answer 2

var timeleft = localStorage.getItem("myTime")? localStorage.getItem("myTime"):120;
var downloadTimer = setInterval(function(){
  document.getElementById("countdown").innerHTML = timeleft + " seconds remaining";
  timeleft -= 1;
  localStorage.setItem("myTime",timeleft);
  if(timeleft <= 0){
    clearInterval(downloadTimer);
    document.getElementById("countdown").innerHTML = "Token expired";
  }
}, 1000);

<p id="countdown"></p>

即使刷新需要一段时间，它也会从以前的值开始。

Answer 3

我了解您的问题是，您倒计时到某个特定的时间和日期。因此，您必须设置一个截止日期，否则它将在每次刷新后消失。所以我希望这段代码对您有所帮助。

var deadline = new Date("May 8, 2019 15:37:25").getTime(); 
var x = setInterval(function() { 
   var now = new Date().getTime(); 
   var t = deadline - now; 
   var days = Math.floor(t / (1000 * 60 * 60 * 24)); 
   var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60)); 
   var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60)); 
   var seconds = Math.floor((t % (1000 * 60)) / 1000); 
   document.getElementById("countdown").innerHTML = days + "d "  
   + hours + "h " + minutes + "m " + seconds + "s "; 
    if (t < 0) { 
        clearInterval(x); 
        document.getElementById("countdown").innerHTML = "EXPIRED"; 
    } 
}, 1000);

Answer 4

如果您希望倒计时不考虑刷新而保持计数，则可以设置一次日期并计算刷新的剩余时间。

var timeleft = 120;

var startTime = localStorage['startTime'];
if (startTime) {
    timeDiff = Math.floor((Date.now() - startTime)/1000);
    timeleft -= timeDiff;
} else {
    localStorage['startTime'] = Date.now();
}

var downloadTimer = setInterval(function(){
  document.getElementById("countdown").innerHTML = timeleft + " seconds remaining";
  timeleft -= 1;
  if(timeleft <= 0){
    clearInterval(downloadTimer);
    document.getElementById("countdown").innerHTML = "Token expired";
  }
}, 1000);

<p id="countdown"></p>

如果您希望倒计时基于每次刷新的秒数连续性，则可以选择在每个间隔存储在localStorage中。

如果单击浏览器刷新，则停止倒计时刷新

4 个答案: