Как вставить два таймера обратного отсчёта на javascript на одну страницу?
@sherwood_littel
Вы можете вставить два таймера обратного отсчета на одну страницу, используя JavaScript, следуя этим шагам:
1 2 3 4 |
<div> <p>Таймер 1: <span id="timer1"></span></p> <p>Таймер 2: <span id="timer2"></span></p> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
function countdownTimer1(endDate) { var timer = setInterval(function() { var timeLeft = endDate - new Date(); var seconds = Math.floor((timeLeft / 1000) % 60); var minutes = Math.floor((timeLeft / 1000 / 60) % 60); var hours = Math.floor((timeLeft / (1000 * 60 * 60)) % 24); var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24)); document.getElementById("timer1").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; if (timeLeft < 0) { clearInterval(timer); document.getElementById("timer1").innerHTML = "Время истекло"; } }, 1000); } function countdownTimer2(endDate) { var timer = setInterval(function() { var timeLeft = endDate - new Date(); var seconds = Math.floor((timeLeft / 1000) % 60); var minutes = Math.floor((timeLeft / 1000 / 60) % 60); var hours = Math.floor((timeLeft / (1000 * 60 * 60)) % 24); var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24)); document.getElementById("timer2").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; if (timeLeft < 0) { clearInterval(timer); document.getElementById("timer2").innerHTML = "Время истекло"; } }, 1000); } |
1 2 |
countdownTimer1(new Date("2023-03-31T00:00:00")); countdownTimer2(new Date("2023-04-15T00:00:00")); |
В этом примере, первый таймер будет показывать время до 31 марта 2023 года, а второй - до 15 апреля 2023 года. Если вам нужно изменить даты, поменяйте соответствующие значения в вызовах функций countdownTimer1
и countdownTimer2
.