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

Иногда возникает необходимость вывести на страницу таймер обратного счета.
Например, Вы имеете интернет-магазин, и Вы хотите сообщить своим клиентам что до окончания какой-то акции осталось столько-то времени.
Или, например, Вы хотите вывести на своем сайте что до нового года осталось столько-то времени.
Либо Вы запустили какой-то конкурс, и Вы хотите сообщить участникам что, до окончания конкурса осталось столько-то времени.
Так вот, в этой статье, представлен код для создания такого таймера.
<!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>
В результате у нас получился такой простой таймер обратного отсчета:
Понравилась статья?
Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.
Поделиться с друзьями:
Подписаться на новые статьи:
Поддержите пожалуйста мой проект!
Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту sergiu1607@gmail.com. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.
Добавляйтесь ко мне в друзья в:
Добавляйтесь в мои группы:
Подпишитесь на мои каналы:
Автор статьи: Мунтян Сергей
Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО!!!
Дата добавления: %date%