Какой счётчик обратного отсчёта flipdown (d: h: m: s) на чистом JavaScript выбрать?

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

Какой счётчик обратного отсчёта flipdown (d : h : m : s) на чистом JavaScript выбрать?

Мне понравился вот этот:
https://github.com/PButcher/flipdown?ysclid=lj6ye3...
https://codepen.io/pbutcher/pen/dzvMzZ

Но он не responsive. Пробовал править стили в медиа-запросах, но там чёрт ногу сломит – на каждый элемент стили править нужно.

Хорошо бы иметь в арсенале такой счётчик, который можно было бы засунуть в обёртку определённого размера, задать этому счётчку width: 100%, и он бы респонсился под обёртку.

Есть такие? Не могу найти.

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

Пробовал править стили в медиа-запросах, но там чёрт ногу сломит – на каждый элемент стили править нужно.
Хорошо бы иметь в арсенале такой счётчик, который можно было бы засунуть в обёртку определённого размера, задать этому счётчку width: 100%, и он бы респонсился под обёртку.

Ну а вы как хотели? Легко только в сказке. )))
Перепишите css в sass, scss или less. Именно в ручную переписать по всем правилам, а не через онлайн конверторы.
Если не умеете/не знаете - учите.
И править под нужные медиа-запросы. Потом компилируете less/sass/scss в css.

  • Да причем тут Sass или Less? Неужели никто не запарился и не нарисовал счётчик аля responsive? Чтобы в медиазааросе задал ширину контейнера таймера и все его элементы тут же под него подстроились.
    Появится время, обязательно заморочусь )

    • Нужно решить такую задачу?

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

    Заказать помощь
    Лучший ответ
    1
    Алексей Денисов Ответ

    Для создания счетчика обратного отсчета flipdown (с отображением дней, часов, минут и секунд) на чистом JavaScript можно использовать различные библиотеки и плагины. Вот несколько вариантов, которые могут быть полезны:

    1. FlipClock.js: Это плагин jQuery, который может использоваться для создания счетчиков обратного отсчета. Он имеет гибкие настройки и легко настраивается под ваши потребности.

    ```html

     
 
 
  <title>FlipClock.js Example</title>
 
 
 
 
<div class="clock" style="margin: 2em"></div>
 
 
 
 
  var clock = $('.clock').FlipClock({
    clockFace: 'DailyCounter',
    countdown: true
  });
  clock.setTime(86400); // 1 day in seconds
  clock.start();

    <title>FlipClock.js Example</title> <div class="clock" style="margin: 2em"></div> var clock = $('.clock').FlipClock({ clockFace: 'DailyCounter', countdown: true }); clock.setTime(86400); // 1 day in seconds clock.start();

    ```

    2. CountDown.js: Это еще один плагин JavaScript, который обеспечивает легкую настройку и простое использование для создания счетчиков обратного отсчета.

    ```html

     
 
 
  <title>CountDown.js Example</title>
 
 
 
 
<div id="countdown"></div>
 
 
 
  var countdown = new Countdown({
    selector: '#countdown',
    finalDate: '2023-01-01',
    msgBefore: 'Flipdown starts in:',
    msgAfter: 'Flipdown is over!'
  });

    <title>CountDown.js Example</title> <div id="countdown"></div> var countdown = new Countdown({ selector: '#countdown', finalDate: '2023-01-01', msgBefore: 'Flipdown starts in:', msgAfter: 'Flipdown is over!' });

    ```

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

    ```html

     
 
 
  <title>Simple Countdown Example</title>
 
 
 
<div id="countdown"></div>
 
 
  var countdownDate = new Date('2022-12-31T23: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('countdown').innerHTML = 'Days: ' + days + ' Hours: ' + hours + ' Minutes: ' + minutes + ' Seconds: ' + seconds;
 
    if (distance &lt; 0) {
      clearInterval(x);
      document.getElementById(&#039;countdown&#039;).innerHTML = &#039;EXPIRED&#039;;
    }
  }, 1000);

    <title>Simple Countdown Example</title> <div id="countdown"></div> var countdownDate = new Date('2022-12-31T23: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('countdown').innerHTML = 'Days: ' + days + ' Hours: ' + hours + ' Minutes: ' + minutes + ' Seconds: ' + seconds; if (distance &lt; 0) { clearInterval(x); document.getElementById(&#039;countdown&#039;).innerHTML = &#039;EXPIRED&#039;; } }, 1000);

    ```

    Выбор конкретного счетчика обратного отсчета будет зависеть от ваших потребностей и уровня удобства использования. Выберите тот, который лучше всего подходит для вашего проекта и удовлетворяет все ваши требования.

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

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

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

    комментарий

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

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

    VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов woocommerce Как отображать при фильтрации товары со значением search параметра visibility: HUSKY — Products Filter for WooCommerce? 0 ответов