JS Countdown - удобный инструмент для обратного отсчета на сайте

JS Countdown (обратный отсчет) - это процесс, при котором отображается количество времени, оставшегося до определенного момента времени. Например, до старта нового года, скачивания файлов или начала специального предложения в интернет-магазине.

Для создания JS Countdown используются функции setTimeout и setInterval, которые позволяют запускать и останавливать заданный отсчет времени.

Пример кода JS Countdown:

HTML:

JS:

const countdown = () => {

const countdownDays = document.querySelector('.countdown__days'),

countdownHours = document.querySelector('.countdown__hours'),

countdownMinutes = document.querySelector('.countdown__minutes'),

countdownSeconds = document.querySelector('.countdown__seconds');

const deadline = new Date('2022-01-01').getTime();

const getTimeRemaining = () => {

const currentTime = new Date().getTime();

const remainingTime = deadline - currentTime;

const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));

const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));

const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

return {

'total': remainingTime,

'days': days,

'hours': hours,

'minutes': minutes,

'seconds': seconds

}

}

const updateCountdown = () => {

const remainingTime = getTimeRemaining();

countdownDays.innerHTML = remainingTime.days;

countdownHours.innerHTML = ('0' + remainingTime.hours).slice(-2);

countdownMinutes.innerHTML = ('0' + remainingTime.minutes).slice(-2);

countdownSeconds.innerHTML = ('0' + remainingTime.seconds).slice(-2);

if(remainingTime.total <= 0) {

clearInterval(interval);

}

}

updateCountdown();

const interval = setInterval(updateCountdown, 1000);

}

countdown();

В данном примере создается функция countdown, которая отображает обратный отсчет до определенной даты (в данном случае до 1 января 2022 года). Функция использует методы getTime и Math.floor для вычисления оставшегося времени в днях, часах, минутах и секундах. Затем значения времени выводятся на страницу при помощи метода innerHTML.

Также функция countdown использует метод setInterval для обновления времени каждую секунду, и метод clearInterval для остановки отсчета после достижения заданного времени (в данном случае 1 января 2022 года).