Мой JavaScript 15/07/2020

Таймер обратного отсчёта для сайта на чистом JS

Таймер обратного отчёта на чистом JS с localStorage

Таймер обратного отсчёта на чистом JavaScript. Выполнил с использованием ООП, дабы была возможность расширять функционал, создавая вариации таймера через дочерние классы без ущерба для исходного варианта. Ещё я использовал localStorage, теперь при клике на кнопку в локальном хранилище браузера фиксируется состояние таймера. Как результат - при повторном заходе на сайт предыдущее действие сохраняется.

Попробуйте сами:

Скачать с GitHub Смотреть на Codepen Реальное демо

Код:

	class Timer {
            constructor(el, time) {
              this.el = el;
              this.time = time;
              this.interval;
              this.start();
              this.render();
            }
            start() {
              this.interval = setInterval(() => this.tick(), 1000);
              let data = localStorage.getItem('timerData');
              let timerData = JSON.parse(data);
              if (timerData != null && timerData.buttonState) {
                clearInterval(this.interval); // if we remove this line here - we can proceed with counting down time, but the button still will be freezed.
                this.time = timerData.time;
                let buttonElement = document.querySelector('.action button');
                alterElement(buttonElement,
                  timerData.buttonState,
                  'Вот и сказочке конец! Лучше чтобы был конец сказке чем конец сказки.');
              }
            }
            stop() {
              saveToTheLocalStorage(this.time, true);
              clearInterval(this.interval);
            }
            tick() {
              this.time--;
              this.render();
              let data = localStorage.getItem('timerData');
              let timerData = JSON.parse(data);
              if (timerData != null && timerData.buttonState) {
                saveToTheLocalStorage(this.time, true);
              } else {
                saveToTheLocalStorage(this.time, false);
              }
              if (this.time <= 0) {
                this.stop();
              }
            }
            render() {
              let h = parseInt(this.time / 3600);
              let hs = this.time % 3600;
              let m = parseInt(hs / 60);
              let s = hs % 60;
              this.el.innerHTML = `
${h} часов
${m} минут
${s} секунд
` } } let el1 = document.querySelector('.timer'); let t1 = new Timer(el1, 50000); document.querySelector('.action button').addEventListener('click', function() { t1.stop(); alterElement(this, true, 'Вот и сказочки конец!'); }); function alterElement(el, flag, message) { el.disabled = flag; el.innerHTML = message; el.classList.add('button-disabled'); } function saveToTheLocalStorage(time, state) { localStorage.setItem('timerData', JSON.stringify({ time: time, buttonState: state })); }

Я буду рад обсудить свой код ниже в комментариях.

Если эта информация стала для вас полезной, вы можете сказать "спасибо", нажав кнопку вашей любимой социальной сети:

Вконтакте
Одноклассники
Читать еще:

Подпишись и будь в курсе новых публикаций на сайте!