Простой таймер для лэндинга распродажи на JavaScript

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

Код таймера

Приведенный ниже код разместите в том месте лэндинга, где должен выводится таймер:

<div id="countdown" style="font-size: 3em;"></div>

<script>
	// Устанавливаем дату окончания отсчета
	const countdownDate = new Date("2024-10-30T23:59:59").getTime();

	// Обновляем таймер каждую секунду
	const x = setInterval(function() {
		// Получаем текущее время
		const now = new Date().getTime();

		// Находим разницу между текущим временем и временем окончания
		const distance = countdownDate - now;

		// Вычисляем дни, часы, минуты и секунды
		const days = Math.floor(distance / (1000 * 60 * 60 * 24));
		const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
		const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
		const seconds = Math.floor((distance % (1000 * 60)) / 1000);

		// Выводим результат в элемент с id="countdown"
		document.getElementById("countdown").innerHTML = days + "д " + hours + "ч "
			+ minutes + "м " + seconds + "с ";

		// Если отсчет завершен, выводим сообщение
		if (distance < 0) {
			clearInterval(x);
			document.getElementById("countdown").innerHTML = "Время вышло!";
		}
	}, 1000);
</script>

Настройка таймера

Установка даты окончания:
В строке «const countdownDate = new Date("2024-10-30T23:59:59").getTime();» задаем дату и время, до которого будет идти отсчет в формате YYYY-MM-DDThh:mm:ss (буква Т является разделителем между датой и временем). В приведенном выше коде установлена дата 30.10.2024 и время 23:59:59, измените ее на любую другую, просто отредактировав строку на нужную вам дату и время.

Вывод результата:
Таймер отображается в элементе с «id countdown» которому можете прописывать любые стили для изменения внешнего вида таймера. Если отсчет завершен выводится сообщение «Время вышло!».

Итог

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

Опубликовано: 27.08.2024