@MariaM0479

Как продолжить работу секундомера после перезагрузки страницы?

Здравствуйте. Подскажите почему у меня не получается после перезагрузки страницы сохранить тикающие время? В сам localstarage значение сохраняется после перезагрузки, а на экран не выводится, таймер сбрасывается в 0. Вот код:
<div id="stopwatch"></div>
<button id="buttonClick">START</button>

var buttonClick = document.getElementById('buttonClick');

var h4 = document.getElementById('stopwatch');
var ticks = 0;
var ticker = false;

 function formatTime(time) {
    if (time < 10) {
      return "0" + time
    } else {
      return time
    }
  }

function getReady() {
  var  hours = Math.floor(ticks / 3600)
  var  minutes = Math.floor((ticks - hours * 3600) / 60)
  var  seconds = ticks - hours * 3600 - minutes * 60

   h4.innerHTML = formatTime(hours) + " : " + formatTime(minutes) + " : " + formatTime(seconds)
}

buttonClick.addEventListener('click', function(){
	if (buttonClick.innerHTML == "START") {
		buttonClick.innerHTML = "STOP";
		ticker = setInterval(() => {
			getReady()
			ticks += 1
			localStorage.setItem('time', h4.innerHTML)
		}, 1000);
		  hours = 0;
      minutes = 0;
      seconds = 0;
	} else {
		buttonClick.innerHTML = "START";
		hours = 0;
    minutes = 0;
    seconds = 0;
		clearInterval(ticker);
	}
localStorage.setItem('time', h4.innerHTML)
})
if (localStorage.getItem('time') !== null) {
	var clockTimer = localStorage.getItem('time');
	h4.innerHTML = clockTimer;
}

getReady();
  • Вопрос задан
  • 360 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Не то значение сохраняете - какой к чёрту innerHTML? Сохраняйте переменную ticks:

localStorage.setItem('time', ticks);

А когда будете доставать значение из localStorage - не забудьте конвертировать в число, т.к. оно будет строкой:

// если значение отсутствует, то будет установлен 0, т.к. +null === 0
var ticks = +localStorage.getItem('time');
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
1. покажите пальцем место в коде. где код отвечающий за вывод чего-то на экран после загрузки страницы?
2. у Вас есть var ticks = 0; он при загрузке страницы 0 и я не вижу что бы его что-то меняло
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы