Как вставить два таймера обратного отсчёта на javascript на одну страницу?

Пользователь

от sherwood_littel , в категории: JavaScript , год назад

Как вставить два таймера обратного отсчёта на javascript на одну страницу?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от autumn_parker , год назад

@sherwood_littel 

Вы можете вставить два таймера обратного отсчета на одну страницу, используя JavaScript, следуя этим шагам:

  1. Создайте HTML-разметку для таймеров, в которой будут находиться элементы, отображающие значения таймеров:
1
2
3
4
<div>
  <p>Таймер 1: <span id="timer1"></span></p>
  <p>Таймер 2: <span id="timer2"></span></p>
</div>


  1. Создайте функции для обратного отсчета каждого таймера. Каждая функция должна принимать параметры для указания даты, до которой нужно производить отсчет времени.
 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. Вызовите каждую функцию с указанием даты, до которой нужно производить отсчет времени.
1
2
countdownTimer1(new Date("2023-03-31T00:00:00"));
countdownTimer2(new Date("2023-04-15T00:00:00"));


В этом примере, первый таймер будет показывать время до 31 марта 2023 года, а второй - до 15 апреля 2023 года. Если вам нужно изменить даты, поменяйте соответствующие значения в вызовах функций countdownTimer1 и countdownTimer2.