На этом уроке, мы сделаем таймер обратного отсчета на JavaScript , используя уже готовую верстку на HTML и CSS . Если на странице вашего сайта или лендинга действует скидочная акция на товары или услуги, привязанная к конкретной дате её окончания, то всегда уместно рядом расположить счетчик с убывающими цифрами. Так...
На этом уроке, мы сделаем таймер обратного отсчета на JavaScript, используя уже готовую верстку на HTML и CSS. Если на странице вашего сайта или лендинга действует скидочная акция на товары или услуги, привязанная к конкретной дате её окончания, то всегда уместно рядом расположить счетчик с убывающими цифрами. Такое психологическое воздействие на покупателя в интернет-маркетинге хорошо зарекомендовало себя.
Наш таймер будет показывать, сколько дней, часов, минут и секунд осталось до завершения акции. Первым делом нам нужно установить дату завершения скидок, пусть скидка будет до конца 2020 года. Создадим переменную deadline и присвоим ей значение new Date(). new Date() - это объект из класса Date, в параметрах которого передадим желаемую дату завершения скидок.
// дата окончания акции
const deadline = new Date(`2020-12-31`);
В расчетах мы будем отталкиваться от текущего времени, поэтому создадим переменную currentTime с новой временной меткой. Далее подсчитаем разницу между концом года и текущим временем. В переменную dist разница будет записываться в милисекундах. Поскольку нам неудобно работать с миллисекундами, то нужно их перевести в привычные для нас единицы времени.
const currentTime = new Date();
// Оставшееся время до конца года
const dist = deadline - currentTime;
Как вместо миллисекунд получить дни? Нужно разницу dist (значение в мл.) разделить на 1000, так мы получим секунды. Затем полученный результат разделить на 60 (получаем минуты). Повторное деление на 60 даст часы и деление на 24 преобразует в дни. По аналогии с получением дней, разберемся и с остальными единицами времени. Ны выходе, у нас будет четыре переменных с нужными единицами времени. Они будут показывать, сколько времени осталось до конца текущего года. Метод Match.floor на лету округлит полученные цифры до целого числа, в меньшую сторону.
// Перевод в дни
const toDays = Math.floor(dist / 1000 / 60 / 60 / 24);
// Перевод в часы, с учетом остатка деления на 24
const toHours = Math.floor(dist / 1000 / 60 / 60) % 24;
// Перевод в минуты, с учетом остатка деления на 60
const toMinutes = Math.floor(dist / 1000 / 60) % 60;
// Перевод в секунды, с учетом остатка деления на 60
const toSeconds = Math.floor(dist / 1000) % 60;
Для вывода значения четырех переменных на страницу, необходимо получить сами HTML теги, куда будут выводиться числа. Получим их все по селектору со своим уникальным id и запишем в переменные.
const year = document.querySelector('#year');
const days = document.querySelector('#days');
const hours = document.querySelector('#hours');
const minutes = document.querySelector('#minutes');
const seconds = document.querySelector('#seconds');
Далее, во все найденные теги нужно вставить дни, часы, минуты и секунды, которые также хранятся в переменных. Поочередно обращаемся к переменным с тегами и записываем внутри тегов через метод inner.HTML переменные с рассчитанными единицами времени. Для красоты, чтобы у нас всегда выводилось по две цифры, например (01, 02 и.т.д), делаем следующую проверку. Если цифра меньше 10, то прибавляем к ней 0 и плюс само значение переменной, в противном случае выводим просто значение переменной.
days.innerText = toDays;
hours.innerText = toHours < 10 ? '0' + toHours : toHours;
minutes.innerText = toMinutes < 10 ? '0' + toMinutes : toMinutes;
seconds.innerText = toSeconds < 10 ? '0' + toSeconds : toSeconds;
Осталось только создать функцию и запускать ее каждую секунду, чтобы наш счетчик ежесекундно обновлялся и менялись цифры. Поможет нам в этом функция setInterval(), запускающая код с определенным интервалом. Обернем наш код с расчетом времени в функцию updateCounter.
function updateCounter() {
// здесь код
}
Первым аргументом передаем название функции, вторым аргументом - время в миллисекундах.
// Запускаем функцию каждую секунду
setInterval(updateCounter, 1000);
Если после данного урока вас заинтересовал язык JavaScript, то переходите по ссылке на мой видеокурс.
