Узнать, как создать таймер обратного отсчета используя HTML, CSS и JavaScript.
Таймер обратного отсчета
Попробуйте сами »Создать таймер обратного отсчета
<!-- Отображение таймера обратного отсчета в элементе -->
<p id="demo"></p>
<script>
// Установка даты, до которой мы отсчитываем время to
var countDownDate = new Date("Jul 15, 2069 03:00:00").getTime();
//
Обновить обратный отсчет каждую секунду
var x = setInterval(function() {
// Получить сегодняшнюю дату и время
var now = new Date().getTime();
// Найти расстояние между текущим моментом и датой обратного отсчета
var distance = countDownDate - now;
// Расчеты времени для
дней, часов, минут и секунд
var days = Math.floor(distance /
(1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 *
60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance
% (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance
% (1000 * 60)) / 1000);
// Отображаем результат в элементе с
id="demo"
document.getElementById("demo").innerHTML = days + "d " +
hours + "h "
+ minutes + "m " + seconds + "с ";
// Если
отсчет завершен, напишите какой-нибудь текст
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML
= "EXPIRED";
}
}, 1000);
</script>
Попробуйте сами »
Совет: узнайте больше о методе window.setInterval() в нашем справочнике по JavaScript.