Введение

Таймер обратного отсчета — важная функция веб-страницы, которая требует от пользователя действия в течение определенного периода времени. Он часто используется для повышения вовлеченности пользователей на веб-странице. Он широко используется на веб-страницах, таких как страницы продаж, страницы подписки, страницы событий и многое другое.

В этой статье я объясню, как я создал собственный таймер обратного отсчета с помощью HTML, CSS и JavaScript, чтобы вы могли создать свой собственный.

Описание изображения


Как работает таймер обратного отсчета

Прежде чем мы углубимся, давайте разберемся, как работает таймер обратного отсчета. Он просто показывает время, оставшееся от настоящего момента до указанного более позднего времени; чтобы получить это, нам нужно вычесть время сейчас из более позднего времени.

Как упоминалось ранее, мы должны вычесть текущее время из будущего времени, чтобы рассчитать оставшееся время. К счастью, для этого мы можем использовать метод JavaScript «Date()».

Давайте посмотрим на простой пример вычитания двух дат:


let first_date = new Date('10/18/2022') 
let second_date = new Date('09/18/2022')

console.log(first_date - second_date)
//2592000000

let date_today = new Date() //today's date

console.log(first_date - date_today)
//5140586280

Войти в полноэкранный режим

Выйти из полноэкранного режима

Из вышесказанного мы можем получить разницу в датах в миллисекундах.

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

Из нашего основного преобразования:
1 день = 1000 х 60 х 60 х 24 миллисекунды
1 час = 1000 х 60 х 60 миллисекунд
1 минута = 1000 х 60 миллисекунд
1 секунда = 1000 миллисекунд


const dateTill = new Date('10/18/2022')
//end date
const dateFrom = new Date();
//start date (today)

const diff = dateTill - dateFrom
//difference in dates

day_to_miliseconds = 1000 * 60 * 60 * 24
// 1 day equivalent in milliseconds
hour_to_miliseconds = 1000 * 60 * 60
// 1 hour equivalent in milliseconds
minute_to_miliseconds = 1000 * 60
// 1 minute equivalent in milliseconds
second_to_miliseconds = 1000
// 1 second equivalent in milliseconds

let days = Math.floor(diff / day_to_miliseconds );
// number of days from the difference in dates
let hours = Math.floor((diff % day_to_miliseconds) / hour_to_miliseconds);
// number of hours from the remaining time after removing days 
let minutes = Math.floor((diff % hour_to_miliseconds) / minute_to_miliseconds);
// number of minutes from the remaining time after removing hours
let seconds = Math.floor((diff % minute_to_miliseconds) / second_to_miliseconds);
// number of hours from the remaining time after removing seconds

console.log(days, hours, minutes, seconds)
// expected result
Войти в полноэкранный режим

Выйти из полноэкранного режима

Круто, правда?
Теперь, когда мы поняли, как получить наши данные, давайте создадим красивый таймер обратного отсчета с помощью HTML и CSS.

С реализованным выше дизайном мы будем использовать JavaScript setInterval() метод для реализации функции обратного отсчета.


Как setInterval() метод работает.

setInterval() метод используется для выполнения функции с интервалом (например, каждую 1 минуту, каждые 5 минут и т. д.) до тех пор, пока clearInterval() метод называется.


Синтаксис

setInterval(() => function(), time);
Войти в полноэкранный режим

Выйти из полноэкранного режима

  • function() представлять функцию для запуска каждый время
  • time представляет интервал, через который мы должны вызвать функцию в миллисекундах.
  • Мы также будем использовать clearInterval() способ остановить нашу setInterval() метод после достижения указанной даты окончания.

Для таймера обратного отсчета мы напишем функцию, которая будет запускаться каждую 1 секунду (1000 миллисекунд).
Давайте внимательно посмотрим на приведенный ниже код.

И это все. У вас есть супер крутой пользовательский таймер обратного отсчета.

Примечание: Таймер обратного отсчета появится, если вы читаете эту статью 18 октября 2022 года или позже. Вы должны знать, почему? Это потому, что «18.10.2022» является нашей конечной датой. Не стесняйтесь изменить дату окончания на более позднюю дату после сегодняшнего дня и увидеть волшебство.


Подведение итогов

Таймер обратного отсчета является важной функцией на некоторых веб-страницах, таких как страницы продаж, страницы подписки и многие другие варианты использования. В этой статье я объяснил, как использовать javascript setInterval() а также clearInterval() методы для создания таймера обратного отсчета в несколько простых шагов.

Вы также можете ознакомиться с моей статьей о том, как создать таймер обратного отсчета в ReactJS.

Спасибо за чтение 🌟🌟🌟

Если у вас есть какие-либо вопросы, пожалуйста, оставьте их в разделе комментариев.

Я хотел бы связаться с вами на Твиттер

Удачного кодирования!