Задать вопрос Войти Регистрация

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

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

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

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp
javascript обратныйотсчёт

2 ответа

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

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

@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.

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

от rodger.botsford , 9 месяцев назад

@sherwood_littel 

Прекрасно, здесь пример кода, который может помочь вам вставить два таймера обратного отсчета на одну страницу:

 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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Два таймера обратного отсчёта</title>
</head>
<body>

<div>
  <p>Таймер 1: <span id="timer1"></span></p>
  <p>Таймер 2: <span id="timer2"></span></p>
</div>

<script>
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);
}

countdownTimer1(new Date("2023-03-31T00:00:00"));
countdownTimer2(new Date("2023-04-15T00:00:00"));
</script>

</body>
</html>


Скопируйте этот код в файл с расширением .html и откройте его в вашем браузере. Два таймера обратного отсчета будут отображаться на странице, показывая оставшееся время до установленных дат. Надеюсь, это поможет вам в создании страницы с двумя таймерами обратного отсчета!

Похожие обсуждения:

Как запустить счётчик таймера на javascript?
Как вставить java-апплет на html-страницу?
Как обновить страницу на javascript?
Как объединить два массива в один на javascript?
Как на javascript вставить тег в начало html странички?
Как создать таблицу на html и вставить туда числа переменных javascript?