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

Ссылка скопирована
CSS HTML JavaScript
24 апреля 2026 1 ответ

Всем привет!
Есть таймер, когда истекает каждый десяток (минут, секунд и так далее),десятки листаются по обычному вперед, а единицы резко начинают проигрываться в обратную сторону. Как сделать так, как на фото? Т.е. чтобы десятки шли вниз?

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

Также желательно привязать к localStorage, чтобы при перезагрузке страницы таймер не сбрасывался.
Буду благодарен за помощь

Код: https://codepen.io/schip454/pen/VwVOpXW

Дополнительно:

Это не фото.

  • Алексей Уколов, не понял

    • Нужно менять механику смещения параметра в translate3d, чтобы смещение по вертикали анимировалось между (n/2) и (n/2) + 1 высотой списка (перелистывались соседние элементы центральной части списка). Когда анимация достигнет уровня (n/2) + 1, нужно сделать два одновременных действия: 1 - переставить последний элемент списка на первое место, 2 - вернуть уровень до отметки (n/2). Тогда будет достигнут эффект замкнутости и цикличности списка и анимация не будет откатываться назад.

    • Сможешь помочь с кодом? Не совсем уловил суть
    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Виктор Sys Ответ

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

    HTML:

    <div id="timer"></div>

    <div id="timer"></div>

    CSS:

    #timer {
  font-size: 2em;
  text-align: center;
}

    #timer { font-size: 2em; text-align: center; }

    JavaScript:

    // Устанавливаем дату окончания отсчета
var countDownDate = new Date("Dec 31, 2022 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);
 
  // Отображаем результат в элементе с id="timer"
  document.getElementById("timer").innerHTML = days + "д " + hours + "ч "
  + minutes + "м " + seconds + "с ";
 
  // Если отсчет закончился, выводим сообщение
  if (distance &lt; 0) {
    clearInterval(x);
    document.getElementById(&quot;timer&quot;).innerHTML = &quot;Время истекло&quot;;
  }
}, 1000);

    // Устанавливаем дату окончания отсчета var countDownDate = new Date("Dec 31, 2022 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); // Отображаем результат в элементе с id="timer" document.getElementById("timer").innerHTML = days + "д " + hours + "ч " + minutes + "м " + seconds + "с "; // Если отсчет закончился, выводим сообщение if (distance &lt; 0) { clearInterval(x); document.getElementById(&quot;timer&quot;).innerHTML = &quot;Время истекло&quot;; } }, 1000);

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

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    Веб-разработка Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)? 2 ответов Android Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)? 1 ответ Google Как подтвердить аккаунт Google? 1 ответ Instagram Как вставить группу полей ACF в записи после 1-го абзаца в WordPress? 0 ответов