Сбрасывается таймер обратного отсчета при обновлении страницы

Question

Есть простой таймер с активацией по кнопке
Все работает. Но если перезагрузить страницу, то таймер слетает.
Помогите, пожалуйста, заставить его работать даже после перезагрузки страницы. В js не знаток и гугл не особо помог.

function startTimer(duration, display) {
  var timer = duration,
    minutes, seconds;
  var timerID = setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + ":" + seconds;

    if (--timer < 0) {
      clearInterval(timerID);
      display.textContent = "";
    }
  }, 1000);
}


var start = document.querySelector('#start');
start.addEventListener('click', function() {
  var Minutes = 60,
    display = document.querySelector('#time');
  startTimer(Minutes, display);
});

<span id="time"></span> minutes!
<button id="start">Start</button>

javascript

Юра Бирюков · Answer

многих интересует решение данной проблемы После долгих часов поиска и помощи - решение:

< script >
  var newDate,
    intervalId;
if (localStorage["timer"]) {
  newDate = new Date(localStorage["timer"]);
  timer(); // Инициализация текста в элементах.
  intervalId = setInterval(timer, 1000);
}
document.querySelector("#start").onclick = onStart;

function onStart() {
  newDate = Date.now() + 60 * 60000; // Таймер на 60 минут
  timer(); // Инициализация текста в элементах.
  if (!intervalId) intervalId = setInterval(timer, 1000);
  localStorage["timer"] = new Date(newDate).toISOString();
}

function timer() {
  var now = Date.now(),
    rest = newDate >= now ? Math.round((newDate - now) / 1000) * 1000 : 0,
    s = "";
  if (!rest) {
    clearInterval(intervalId);
    intervalId = null;
    localStorage.removeItem("timer");
  } else {
    var rest2 = rest % 3600000;
    let hh = (rest - rest2) / 3600000;
    rest = rest2;

    rest2 = rest % 60000;
    let mm = (rest - rest2) / 60000;
    rest = rest2;

    rest2 = rest % 1000;
    let ss = (rest - rest2) / 1000;
    let ms = rest2;

    s = (hh < 10 ? "0" : "") + hh + ":" +
      (mm < 10 ? "0" : "") + mm + ":" +
      (ss < 10 ? "0" : "") + ss;
  }
  document.querySelector("#time").textContent = s;
  document.querySelector("#start").style.display = 'none';

} <
/script>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
</head>

<body>
  <span id="time"></span> minutes!
  <button id="start">Start</button>

</body>

</html>

Kvilios · Answer

Как вариант. использовать localStorage (см. jsfiddle):

function startTimer(duration, display) {
  var timer = duration,
    minutes, seconds;
  var timerID = setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    window.localStorage.setItem('Minutes', duration--);

    display.textContent = minutes + ":" + seconds;

    if (--timer < 0) {
      clearInterval(timerID);
      display.textContent = "";
    }
  }, 1000);
}

var start = document.querySelector('#start');
start.addEventListener('click', function() {
  var Minutes = window.localStorage.getItem('Minutes') || 60,
    display = document.querySelector('#time');
  startTimer(Minutes, display);
});

<span id="time"></span> minutes!
<button id="start">Start</button>

https://jsfiddle.net/Kvilios/7pha46x2/10/

Сбрасывается таймер обратного отсчета при обновлении страницы

2 Answers

Add your own answers!

Ask a Question