Как сделать таймер обратного отсчета на сайте

Актуально на 2025 год

Просмотры: 198

Если вы хотите создать на своем сайте таймер обратного отсчёта, то это не так уж и сложно. В этой заметке расскажу, как это сделать. Предлагаю вашему вниманию пошаговую инструкцию.

Шаг 1. Выберите язык программирования.

Первым шагом является выбор языка программирования, на котором вы будете создавать таймер. Наиболее популярными языками являются JavaScript, PHP и Python.

Шаг 2. Напишите код.

После выбора языка программирования, вы можете начать писать код. Вот пример кода на JavaScript:

var countDownDate = new Date("May 2, 2073 15:37:25").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);

  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);

var countDownDate = new Date("May 2, 2073 15:37:25").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);

document.getElementById("demo").innerHTML = days + "d " + hours + "h "

+ minutes + "m " + seconds + "s ";

if (distance < 0) {

clearInterval(x);

document.getElementById("demo").innerHTML = "EXPIRED";

}

}, 1000);

Этот код создает таймер обратного отсчета до заданной даты и времени. Вы можете настроить дату и время, до которых будет идти обратный отсчет, а также изменить формат вывода времени.

Шаг 3. Добавьте таймер на свой сайт.

После написания кода вы можете добавить таймер на свой сайт. Для этого вы можете использовать тег div с указанным id:

<div id="demo"></div>

1	<div id="demo"></div>

Этот тег будет использоваться для вывода времени обратного отсчёта в конкретном месте на сайте.

Шаг 4. Настройте стили.

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

#demo {
  font-size: 50px;
}

#demo {

font-size: 50px;

}

Этот CSS-код устанавливает размер шрифта для таймера.

В конечном итоге результат будет выглядеть следующим образом:

See the Pen
Untitled by Artem (@HoboBo)
on CodePen.

Вот ещё интересный вариант таймера:

HTML:

<div class="countdown">
  <div class="countdown-item">
    <span class="countdown-number" id="days">10</span>
    <span class="countdown-label">Days</span>
  </div>
  <div class="countdown-item">
    <span class="countdown-number" id="hours">05</span>
    <span class="countdown-label">Hours</span>
  </div>
  <div class="countdown-item">
    <span class="countdown-number" id="minutes">30</span>
    <span class="countdown-label">Minutes</span>
  </div>
  <div class="countdown-item">
    <span class="countdown-number" id="seconds">20</span>
    <span class="countdown-label">Seconds</span>
  </div>
</div>

</div>

<span class="countdown-label">Hours</span>

</div>

<span class="countdown-label">Minutes</span>

</div>

<span class="countdown-label">Seconds</span>

</div>

CSS:

.countdown {
  display: flex;
  justify-content: center;
  align-items: center;
}

.countdown-item {
  text-align: center;
  margin: 0 10px;
}

.countdown-number {
  font-size: 48px;
  font-weight: bold;
}

.countdown-label {
  font-size: 16px;
  text-transform: uppercase;
}

.countdown {

display: flex;

justify-content: center;

align-items: center;

}

.countdown-item {

text-align: center;

margin: 0 10px;

}

.countdown-number {

font-size: 48px;

font-weight: bold;

}

.countdown-label {

font-size: 16px;

text-transform: uppercase;

}

JS:

// Устанавливаем дату, до которой нужно считать время
var countDownDate = new Date("May 2, 2073 23:59:59").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);

  // Обновляем значения на странице
  document.getElementById("days").innerHTML = days;
  document.getElementById("hours").innerHTML = hours;
  document.getElementById("minutes").innerHTML = minutes;
  document.getElementById("seconds").innerHTML = seconds;

  // Если время истекло, выводим сообщение
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("countdown").innerHTML = "EXPIRED";
  }
}, 1000);

// Устанавливаем дату, до которой нужно считать время

var countDownDate = new Date("May 2, 2073 23:59:59").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);

// Обновляем значения на странице

document.getElementById("days").innerHTML = days;

document.getElementById("hours").innerHTML = hours;

document.getElementById("minutes").innerHTML = minutes;

document.getElementById("seconds").innerHTML = seconds;

// Если время истекло, выводим сообщение

if (distance < 0) {

clearInterval(x);

document.getElementById("countdown").innerHTML = "EXPIRED";

}

}, 1000);

Результат:

See the Pen
Timer by Artem (@HoboBo)
on CodePen.

Как видите, создать таймер обратного отсчёта на сайте не так уж и сложно. Следуя этим простым шагам, вы можете создать свой собственный таймер и использовать его на своем веб-ресурсе.