Таймер обратного отсчета - это точный таймер, который можно использовать на веб-сайте или в блоге для отображения обратного отсчета до любого особого события, такого как день рождения или годовщина.
Основы таймера обратного отсчета:
- Установите действительную дату окончания.
- Подсчитайте оставшееся время.
- Преобразуйте время в удобный формат.
- Выведите данные часов как объект многократного использования.
- Отобразите часы на странице и остановите часы, когда они достигнут нуля.
Шаг 1. Установите действительную дату окончания
Допустимая дата и время окончания должны быть строкой в любом из форматов, понятных JavaScript-методу Date.parse ().
Шаг 2: Рассчитайте оставшееся время
Сначала мы вычисляем оставшееся время, вычитая крайний срок из текущей даты и времени, затем вычисляем количество дней, часов, минут и секунд. Функция Math.floor () используется для возврата наибольшего целого числа, меньшего или равного заданному. номер.
Шаг 3: выведите результат
В приведенном ниже коде результат представлен как вывод id = ”demo”.
Шаг 4. Напишите текст, если обратный отсчет закончился
Если таймер обратного отсчета закончился, на экране отобразится «истек».
ВХОД :
<!DOCTYPE HTML>
<html>
<head>
<style>
p {
text-align: center;
font-size: 60px;
}
</style>
</head>
<body>
<p id="demo"></p>
<script>
var deadline = new Date("Jan 5, 2018 15:37:25").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var t = deadline - now;
var days = Math.floor(t / (1000 * 60 * 60 * 24));
var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60));
var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((t % (1000 * 60)) / 1000);
document.getElementById("demo").innerHTML = days + "d "
+ hours + "h " + minutes + "m " + seconds + "s ";
if (t < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
</body>
</html>
|