Таймер обратного отсчета, до даты, или еженедельный

24 ноября 2024
Таймер до даты

Используйте следующую версию скрипта, которая корректно рассчитывает оставшееся время:

<div class="p-3 bg-white text-center">
<p class="lead" style="color:#ce1dab;">Можно внести только предоплату и оплатить остаток во время обучения, выбрав удобную дату и график посещения.</p>
    <div class="row align-items-start justify-content-center">
        <div class="col-md-3 col-12"><h3>До конца акции осталось:</h3></div>
        <div class="col-md-1 col-2" style="display:none"><div id="months" class="display-4 text-danger"></div>мес.</div>
        <div class="col-md-1 col-2"><div id="days" class="display-4 text-danger"></div>дн.</div>
        <div class="col-md-1 col-2"><div id="hours" class="display-4 text-danger"></div>час.</div>
        <div class="col-md-1 col-2"><div id="minutes" class="display-4 text-danger"></div>мин.</div>
        <div class="col-md-1 col-2"><div id="seconds" class="display-4 text-danger"></div>сек</div>
    </div>
</div>

<script>
    function updateCountdown() {
        const endDate = new Date('January 31, 2025 23:59:59');
        const now = new Date();
        const timeLeft = endDate - now;

        // Вычисляем дни, часы, минуты и секунды
        const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
        const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

        // Выводим значения
        document.getElementById('days').innerText = days;
        document.getElementById('hours').innerText = hours;
        document.getElementById('minutes').innerText = minutes;
        document.getElementById('seconds').innerText = seconds;

        // Скрываем поле "месяцы", так как расчет месяцев сложный и обычно его опускают
    }

    setInterval(updateCountdown, 1000);
</script>
  1. Дни вычисляются относительно общего времени в миллисекундах, а не остатка от деления на 30.
  2. Скрипт отображает оставшиеся дни, часы, минуты и секунды.

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

Таймер еженедельный

Нужно обновлять дату следующего понедельника, как только текущий понедельник наступил. Это можно сделать, проверяя, что оставшееся время больше нуля, и если оно отрицательное — обновлять дату следующего понедельника. Вот код:

<div class="p-3 bg-white text-center">
<p class="lead" style="color:#ce1dab;">Можно внести только предоплату и оплатить остаток во время обучения, выбрав удобную дату и график посещения.</p>
    <div class="row align-items-start justify-content-center">
        <div class="col-md-3 col-12"><h3>До следующего понедельника осталось:</h3></div>
        <div class="col-md-1 col-2"><div id="days" class="display-4 text-danger"></div>дн.</div>
        <div class="col-md-1 col-2"><div id="hours" class="display-4 text-danger"></div>час.</div>
        <div class="col-md-1 col-2"><div id="minutes" class="display-4 text-danger"></div>мин.</div>
        <div class="col-md-1 col-2"><div id="seconds" class="display-4 text-danger"></div>сек</div>
    </div>
</div>

<script>
    function getNextMonday() {
        const now = new Date();
        const dayOfWeek = now.getDay(); // День недели (0 = воскресенье, 1 = понедельник и т.д.)
        let daysUntilMonday = (8 - dayOfWeek) % 7; // Сколько дней до следующего понедельника
        if (daysUntilMonday === 0 && now.getHours() >= 0) {
            // Если сегодня понедельник и время >= 00:00, смотрим следующий понедельник
            daysUntilMonday = 7;
        }
        const nextMonday = new Date(now);
        nextMonday.setDate(now.getDate() + daysUntilMonday);
        nextMonday.setHours(0, 0, 0, 0); // Устанавливаем время на начало дня
        return nextMonday;
    }

    function updateCountdown() {
        const nextMonday = getNextMonday();
        const now = new Date();
        const timeLeft = nextMonday - now;

        // Если время истекло, обновляем дату
        if (timeLeft <= 0) {
            nextMonday.setDate(nextMonday.getDate() + 7);
        }

        // Вычисляем оставшееся время
        const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
        const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

        // Обновляем текст в элементах
        document.getElementById('days').innerText = days >= 0 ? days : 0;
        document.getElementById('hours').innerText = hours >= 0 ? hours : 0;
        document.getElementById('minutes').innerText = minutes >= 0 ? minutes : 0;
        document.getElementById('seconds').innerText = seconds >= 0 ? seconds : 0;
    }

    // Обновляем каждую секунду
    setInterval(updateCountdown, 1000);

    // Первоначальный вызов для немедленного обновления
    updateCountdown();
</script>

Что изменено:
  1. Проверка времени:
    • Если оставшееся время стало отрицательным, дата следующего понедельника сдвигается еще на 7 дней.
  2. Условие для "сегодня понедельник":
    • Если сегодня понедельник и текущее время >= 00:00, таймер смотрит следующий понедельник.
  3. Обновление значения только положительными числами:
    • Если значения времени отрицательные, отображается 0.

Теперь таймер корректно обновляется, и после наступления понедельника начинает отсчитывать до следующего!

Готовы помочь в создании нового веб-сайта, или внесении изменений в существующий.
Свяжитесь с нами для получения профессиональной поддержки.

Telegram: @lb_user E-mail: [email protected]

Написать комментарий