my_timer

by Dmitriy Khristoev

HTML

<div class="counterTime" data-timer="6000"></div>
<div class="counterTime" data-timer="10"></div>
<div class="counterTime" data-timer="100"></div>
<div class="counterTime" data-timer="541"></div>
<div class="counterTime" data-timer="-100"></div>

CSS

.counterTime {
  font-size: 96px;
}

JavaScript

;(function(){
  'use strict';

  /*
    <div class="counterTime" data-timer="6000"></div>
    <div class="counterTime" data-timer="10"></div>
    <div class="counterTime" data-timer="100"></div>
  */

  // Массив всех селекторов
  const divCounter = document.querySelectorAll('.counterTime');

  // Перебор каждого элемента массива
  divCounter.forEach(function(value, index){

    // Создание переменных и присвоение, заранее создаем перменную для счетчика
    let counter;
    let divCounter = value;
    let divCounterData = divCounter.getAttribute('data-timer');

    // Если data меньше 0 или отстутствует ни вего не выводим
    if (divCounterData < 0 || !divCounterData) return;

    // Создание объекта с именем счетчика
    let localCounter = {
      name: 'timer_' + divCounterData,
      now: 0,
      then: 0
    }

    // Функция таймер
    function timer(seconds){

      // Очистка счетчика
      clearInterval(counter);

      // Создание переменных даты и будущей даты
      const now = Date.now();
      let then = now + seconds * 1000;

      // Если localStorage с именем нет, создаем и записываем данные в объект
      if (!localStorage.getItem(localCounter.name)) {
        setlocalStorage(now, then);
      }

      // Вывод изначального количества секунд на странице
      displayTimerLeft(seconds);

      // Записываем счетчик в переменную
      counter = setInterval(() => {

        // Парсим объект и присваем даты
        let jsonTimer = JSON.parse(localStorage.getItem(localCounter.name));
        let jsonTimerNow = jsonTimer.now;
        let jsonTimerThen = jsonTimer.then;

        // Вычисляем остаток сукенд
        let secondsLeft = Math.round((jsonTimerThen - Date.now()) / 1000);

        //document.title = secondsLeft;
        displayTimerLeft(secondsLeft);

        // Если таймер < 0, удаляем storage и перезапускаем таймер
        if (secondsLeft < 0) {
          localStorage.removeItem(localCounter.name);
          timer(seconds);

         ...