1

Есть простой таймер с активацией по кнопке Все работает. Но если перезагрузить страницу, то таймер слетает. Помогите, пожалуйста, заставить его работать даже после перезагрузки страницы. В 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>

3
  • напрямую ты в коде ничего не сделаешь. так как весь js после перезагрузки переинициализуирется. норм вариант может быть -это запись состояния таймера перед перезагрузкой страницы в localstorage, после перезагрузки -чтение оттуда. 18 сен 2019 в 6:37
  • @СергейПетрашко а можно подробней о localstorage? как быть с реализацией? не настолько глубоко знаю js чтобы реализовать подобное 18 сен 2019 в 6:44
  • learn.javascript.ru/localstorage
    – ThisMan
    18 сен 2019 в 6:54

2 ответа 2

1

Как вариант. использовать 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/

4
  • вариант. в localStorage данные записывает, но при перезагрузке не возвращает. хотя как то должен возвращать. Вопрос - как их оттуда вернуть? 18 сен 2019 в 8:15
  • В приведённом мной коде можно увидеть строчку window.localStorage.getItem('Minutes')
    – Kvilios
    18 сен 2019 в 8:30
  • Эту строчку я видел и смысл ее мне понятен. Беда в том, что при обнове страницы таймер слетает. а этого происходить с этой строкой не должно. но почему то происходит. парадокс 18 сен 2019 в 8:38
  • Можно заменить localStorage на sessionStorage, тогда не будет слетать при перезагрузке (приведённый мной пример я запускал на jsfiddle без перезагрузки, а просто нажатием "Run").
    – Kvilios
    18 сен 2019 в 9:18
0

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

< 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>

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.