«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript

Игра на «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих


Как создается таймер обратного отсчета для сайта на JavaScript.

В нашем случае таймер будет выглядеть как отсчет времени от текущего времени и даты до полуночи этого же дня (в коде также можно будет указать произвольную дату и время).

Время таймера исчисляется в днях, часах, минутах и секундах.

Продолжим работать с проектом, где создавались Табы. Аналогичный таймер обратного отсчетаВы видите ниже.

12 дней
20 часов
56 минут
20 секунд


С чего начать? Дедлайн

Фрагмент HTML-кода для таймера

Скачать Архив с исходными данными

<div class="promotion__timer">
	<div class="title">Осталось до конца акции:</div>
	<div class="timer">
		<div class="timer__block">
			<span id="days">12</span>
			дней
		</div>
		<div class="timer__block">
			<span id="hours">20</span>
			часов
		</div>
		<div class="timer__block">
			<span id="minutes">56</span>
			минут
		</div>
		<div class="timer__block">
			<span id="seconds">20</span>
			секунд
		</div>
	</div>
</div>

Исходная страница в Браузере

Изначально таймер обратного отсчета не работает, и мы видим данные из верстки: произвольное число дней, часов, минут и секунд.

С чего следует начинать?

Так как таймер имеет обратный отсчет, то сначала нужна дата, до которой отсчет будет идти.

Должен быть какой-то Дедлайн: он устанавливается в формате Даты и помогает выяснить - сколько осталось до конца "акции"

Дедлайн - это крайний срок выполнения задачи или работы, определённый момент времени, к которому должна быть достигнута цель или задача.

Итак, нужно реализовать функционал для определения разницы между временем. На этом этапе нужно будет определить, сколько времени установлено у пользователя - то есть нужна текущая дата. И затем, зная Дедлайн, найти разницу во времени в миллисекундах (далее переменная t). Эта разница во времени и будет отображаться на экране, как таймера обратного отсчета в формате: дни, часы, минуты и секунды.

Разницу t между Дедлайн-ом (в данном случае - это полночь текущего дня) и текущей датой мы получим в миллисекундах. Таким образом...

Прежде чем приступать к созданию таймера обратного отсчета для сайта, необходимо понимать, как из числа миллисекунд получить число дней, часов, минут и секунд.

Конвертация миллисекунд в Дни, Часы, Минуты

Как посчитать дни?

Как число миллисекунд конвертировать в дни?

Нужно исходное число миллисекунд t (разницу между Дедлайн-ом и текущей датой) разделить на число миллисекунд содержащихся в сутках.

days = t / (1000 * 60 * 60 * 24)

И далее полученное число округлить - за это отвечает метод floor объекта Math.

days = Math.floor(t / (1000 * 60 * 60 * 24))

Сколько миллисекунд содержится в сутках?

1000 - миллисекунд содержится в секунде;

1000 x 60 - формула для подсчета миллисекунд в минуте: 1000 умножаем на 60 секунд содержащихся в минуте - 60 000.

1000 x 60 x 60 - формула для подсчета миллисекунд в часе: добавляется 60 минут содержащихся в часе - 3 600 000.

1000 x 60 x 60 x 24 - формула для подсчета миллисекунд в сутках: добавляется 24 часа -86 400 000.

Как посчитать остаток часов?

Важно понять следующее: здесь/для таймера обратного отсчета нужно получить не общее число часов, содержащееся в количестве миллисекунд t, а число часов, оставшееся от числа дней.

Как это сделать?

Нужно взять/получить остаток от деления общего числа часов на 24.

То есть общее число часов нужно разделить с остатком на 24 часа. Получаем число дней, а остаток от деления - это оставшееся число часов.

hours = t / (1000 * 60 * 60) % 24

Как посчитать остаток минут?

Нужно взять/получить остаток от деления общего числа минут на 60.

То есть общее число минут нужно разделить с остатком на 60 минут/в часе. Получаем число часов, а остаток от деления - это оставшееся число минут.

minutes = t / (1000 * 60) % 60

Как посчитать остаток секунд?

Нужно взять/получить остаток от деления общего числа секунд на 60.

То есть общее число секунд нужно разделить с остатком на 60 секунд/в минуте. Получаем число минут, а остаток от деления - это оставшееся число секунд.

seconds = t / 1000 % 60

JS-код для таймера. Алгоритм и Комментарии

Рассмотрим алгоритм и порядок создания таймера обратного отсчета для сайта.

1. Нужен Дедлайн.

2. Должна быть функция, которая вычислять и возвращать элементы таймера - начальное число дней, часов, минут и секунд.

3. Должна быть функция, которая будет заниматься обновлением таймера - он каждый раз должен изменяться на 1 секунду и так постепенно - на минуты, часы и дни.

JavaScript-код

'use strict';

// Текущая дата
const now = new Date();

// Установка полуночи для указанной даты. Возвращает Дедлайн
function setMidNight(date) {
   let midNight = date;
   midNight.setHours(24);
   midNight.setMinutes(0);
   midNight.setSeconds(0);
   midNight.setMilliseconds(0);

   const deadline = midNight;

   return deadline;
}

// Функция для вычисления значений таймера: аргумент - Дедлайн	
function getTimeRemaining(endTime) {
    // Разница в миллисекундах между Дедлайном и текущей датой
    const t = Date.parse(endTime) - Date.parse(new Date());
  
  let days,
      hours,
      minutes,
      seconds;
    
  if (t <= 0) {
     days = 0;
     hours = 0;
     minutes = 0;
     seconds = 0;
  }
  else {
     days = Math.floor(t / (1000 * 60 * 60 * 24)); // число дней
     hours = Math.floor(t / (1000 * 60 * 60) % 24); // ОСТАТОК часов
     minutes = Math.floor(t / (1000 * 60) % 60); // ОСТАТОК минут
     seconds = Math.floor(t / 1000 % 60); // ОСТАТОК секунд
  }
  
  return {
     'total': t,
     'days': days,
     'hours': hours,
     'minutes': minutes,
     'seconds': seconds 
  };

}

// Добавляется 0 к числу, если оно меньше 10
function getZero(num) {
  if (num >= 0 && num < 10) {
     return `0${num}`; 
  }
  else {
     return num;
  }
}

// Установка времени и обновление Таймера
function setClock(selector, endTime){
  
  // получаем доступ к блоку "Таймер" и дочерним элементам
  const timer = document.querySelector(selector), // '.timer'
        days = timer.querySelector('#days'),
        hours = timer.querySelector('#hours'),
        minutes = timer.querySelector('#minutes'),
        seconds = timer.querySelector('#seconds'),
        
         // Функция обновления таймера запускается каждую секунду
        timeInterval = setInterval(updateClock, 1000);

  updateClock(); // Функция первый раз запускается через 1 секунду - см. код выше
  // Поэтому в 1-ю секунду на странице отображаются значения таймера из верстки.
  // Чтобы этого не было - функция updateClock вызывается здесь
        
  // Функция обновления таймера
  function updateClock() {
     // Заносим в переменную t объект, который возвращает функция getTimeRemaining
     const t = getTimeRemaining(endTime);
     
     // Вставка значений на страницу
     days.innerHTML = getZero(t.days);
     hours.innerHTML = getZero(t.hours);
     minutes.innerHTML = getZero(t.minutes);
     seconds.innerHTML = getZero(t.seconds); 
     
     // Если разница в миллисекундах между Дедлайном и текущей датой <= 0
     // Функция обновления таймера - СТОП
     if (t.total <= 0) {
        clearInterval(timeInterval);
     }      
  }
        
}

setClock('.timer', setMidNight(now));

Результат в Браузере

Начинаем с текущей даты. Также получаем Дедлайн - строка №7.

В данном случае для получения Дедлайн-а создается функция "Установка полуночи для указанной даты" setMidNight(), которая возвращает Дедлайн.

Таким образом, этот таймер работает всегда: всегда есть текущая дата и всегда есть время полуночи для текущей даты.

В реальных проектах в переменную deadline, содержащую Дедлайн нередко помещается дата в виде строки или можно явно увидеть запись следующего вида: const deadline = '2022-07-20';.

Почему дата берется в виде строки? В проектах ДАТА часто берется из тега input, который возвращает строку.

строка №20 Функция для получения разницы времени между Дедлайн-ом и текущим временем, то есть разницы между датами и вычисления значений для таймера - function getTimeRemaining().

3. Внутри функции getTimeRemaining().

3.1 Получаем разницу в миллисекундах между Дедлайн-ом и текущим временем:

const t = Date.parse(endTime) - Date.parse(new Date()).

При этом чтобы разобрать строковое представление даты (если это строка) и вернуть количество миллисекунд, используется метод parse.

3.2 Если число миллисекунд t меньше или равно 0, то таймер обнуляется.

3.3 Положительное число миллисекунд t конвертируется в дни; остаток часов, минут и секунд.

3.4 Функции getTimeRemaining() возвращает объект - общее число миллисекунд t и значения дней, часов, минут и секунд для таймера.

строка №63 Функция для установки значений времени на страницу и обновления Таймера setClock(selector, endTime).

1. Получаем доступ к DIV-у с таймером и через него к блокам для значений.

2. Функция updateClock() работает с объектом (который возвращает функция getTimeRemaining()) - со значениями для таймера и вставляет эти значения на страницу.

3. Функция обновления таймера updateClock() запускается каждую секунду.

И так как, текущее время "идет", то каждую секунды изменяется и время таймера - становится видно, как меняется значение секунд.

строка №99 Функция setClock('.timer', setMidNight(now)); запускает весь скрипт.

1-ый аргумент функции setClock() - указывается селектор, через который получаем доступ к блоку с таймером.

2-ой аргумент функции setClock() - это Дедлайн, который возвращает функция setMidNight() и который передается в функцию getTimeRemaining() для получения значений для таймера.



Читайте также...

Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


Рунет - Часть 5
Помощь сайту
Yandex-деньги/Ю-Money
410011236419322
Перевод на карту СБ
4276 1300 1671 5819
WebMoney
R711879515665 Z861169301432
Популярные заметки
Последние заметки