Как сделать таймер отсчёта как на фото?

Для создания таймера отсчета, подобного на фото, вам понадобится использовать язык программирования JavaScript совместно с HTML и CSS.

Вот пример кода, который поможет вам создать такой таймер:

HTML-разметка:

<div id="timer">
  <span id="days"></span>
  <span id="hours"></span>
  <span id="minutes"></span>
  <span id="seconds"></span>
</div>

CSS-стили:

#timer {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

#timer span {
  margin: 0 5px;
}

JavaScript-код:

function formatTime(time) {
  return time < 10 ? `0${time}` : time;
}

function startTimer() {
  const endDate = new Date("2022-12-31T23:59:59"); // Замените эту дату на нужную вам

  setInterval(() => {
    const startDate = new Date();
    const difference = endDate - startDate;

    const days = Math.floor(difference / (1000 * 60 * 60 * 24));
    const hours = Math.floor(
      (difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
    );
    const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((difference % (1000 * 60)) / 1000);

    document.getElementById("days").textContent = formatTime(days);
    document.getElementById("hours").textContent = formatTime(hours);
    document.getElementById("minutes").textContent = formatTime(minutes);
    document.getElementById("seconds").textContent = formatTime(seconds);
  }, 1000);
}

startTimer();

В этом примере мы создаем функцию formatTime, которая принимает число и возвращает строку с двумя символами, чтобы правильно отобразить время. Затем у нас есть функция startTimer, которая устанавливает интервал для обновления таймера каждую секунду.

Внутри этого интервала мы вычисляем разницу между текущей датой и датой окончания, которую вы можете заменить на нужную вам дату. Затем мы разбиваем эту разницу на дни, часы, минуты и секунды и обновляем соответствующие элементы DOM с помощью метода textContent.

Надеюсь, этот ответ поможет вам создать таймер отсчета, подобный на фото!