javascript - Javascript计时器已经在运行，只有在刷新时间重复时，如何防止时间重复

Question

大家好，我有一个项目，我在制作我的项目时遇到了问题。我已经为考试计时器编写了代码，并且它已经成功倒计时。我遇到的问题是当我刷新网页时，计时器返回到初始计算。请帮助我如何解决它。我正在使用 laravel 框架。

var upgradeTime= {{$d->time*60}};
var seconds = upgradeTime;

function timer() {
  var days        = Math.floor(seconds/24/60/60);
  var hoursLeft   = Math.floor((seconds) - (days*86400));
  var hours       = Math.floor(hoursLeft/3600);
  var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
  var minutes     = Math.floor(minutesLeft/60);
  var remainingSeconds = seconds % 60;
  function pad(n) {
    return (n < 10 ? "0" + n : n);
  }
  document.getElementById('time').innerHTML = pad(hours) + ":" + pad(minutes) + ":" + pad(remainingSeconds);
  if (seconds == 0) {
    clearInterval(countdownTimer);
    alert('Waktu habis.');
    document.getElementById("regForm").submit();
  } else {
    seconds--;
  }
}
var countdownTimer = setInterval('timer()', 1000);

标签： javascriptphplaraveltimercountdown

Answer 1

为了实现这一点，您可以将当前时间存储到存储中，也可以从它们（如果可用）中使用它。

var upgradeTime= {{$d->time*60}};
var seconds = upgradeTime;
var prevSeconds = localStorage.getItem('timerSeconds');

// assign prev seconds to current seconds.
if(prevSeconds){
 seconds = prevSeconds
}


function timer() {

  // set seconds into local storage
  localStorage.setItem('timerSeconds', seconds);

  var days        = Math.floor(seconds/24/60/60);
  var hoursLeft   = Math.floor((seconds) - (days*86400));
  var hours       = Math.floor(hoursLeft/3600);
  var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
  var minutes     = Math.floor(minutesLeft/60);
  var remainingSeconds = seconds % 60;
  function pad(n) {
    return (n < 10 ? "0" + n : n);
  }
  document.getElementById('time').innerHTML = pad(hours) + ":" + pad(minutes) + ":" + pad(remainingSeconds);
  if (seconds == 0) {
    clearInterval(countdownTimer);
    alert('Waktu habis.');
    document.getElementById("regForm").submit();
  } else {
    seconds--;
  }
}
var countdownTimer = setInterval('timer()', 1000);

我希望这能帮到您。