Для создания таймера отсчета, подобного на фото, вам понадобится использовать язык программирования 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
.
Надеюсь, этот ответ поможет вам создать таймер отсчета, подобный на фото!