Таймер обратного отсчета для сайта

Таймер обратного отсчета на JavaScript — Таймер обратного отсчета

Иногда возникает необходимость вывести на страницу таймер обратного счета.

Например, Вы имеете интернет-магазин, и Вы хотите сообщить своим клиентам что до окончания какой-то акции осталось столько-то времени.

Или, например, Вы хотите вывести на своем сайте что до нового года осталось столько-то времени.

Либо Вы запустили какой-то конкурс, и Вы хотите сообщить участникам что, до окончания конкурса осталось столько-то времени.

Так вот, в этой статье, представлен код для создания такого таймера.

	<!doctype html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport"
	          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	    <title>Document</title>
	</head>
	<body>

	<!-- Отображаем таймер обратного счета -->
	<p>До окончания акции осталось: </p>
	<div id="countdown"></div>

	<script>

		// Устанавливаем конечную дату в миллисекундах. То есть дату когда закончится отчет
	    let startDate = new Date("Sep 16, 2021 10:00:00").getTime();

	    // Обновляем таймер каждую секунду
	    let x = setInterval(function() {

	        // Получаем текущее время в миллисекундах
	        let now = new Date().getTime();

	        // Узнаем разницу во времени, между текущей даты и конечной даты
	        let diff = (startDate - now);

	        // Считаем дни, часы, минуты и секунды
	        let days = Math.floor(diff / (1000 * 60 * 60 * 24));
	        let hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
	        let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
	        let seconds = Math.floor((diff % (1000 * 60)) / 1000);

	        // Отображаем результат в блоке с id="countdown"
	        document.getElementById("countdown").innerHTML = days + "д " + hours + "ч "
	            + minutes + "м " + seconds + "с ";

	        // Если время истекло, то вместо таймера выводим некий текст.
	        if (diff < 0) {
	            clearInterval(x);
	            document.getElementById("countdown").innerHTML = "Акция истекла";
	        }
	    }, 1000);

	</script>
	</body>
	</html>

В результате у нас получился такой простой таймер обратного отсчета:

Таймер для акции — Результат - таймер обратного отсчета

Понравилась статья?

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Поделиться с друзьями:

Подписаться на новые статьи:

Поддержите пожалуйста мой проект!

%next_previous_article%

Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту sergiu1607@gmail.com. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.

Добавляйтесь ко мне в друзья в: