Используйте следующую версию скрипта, которая корректно рассчитывает оставшееся время:
<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>
- Дни вычисляются относительно общего времени в миллисекундах, а не остатка от деления на 30.
- Скрипт отображает оставшиеся дни, часы, минуты и секунды.
Если вам всё же нужно показывать количество месяцев, то потребуется более сложная логика, которая будет учитывать разное количество дней в каждом месяце.
Таймер еженедельныйНужно обновлять дату следующего понедельника, как только текущий понедельник наступил. Это можно сделать, проверяя, что оставшееся время больше нуля, и если оно отрицательное — обновлять дату следующего понедельника. Вот код:
<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>Что изменено:
- Проверка времени:
- Если оставшееся время стало отрицательным, дата следующего понедельника сдвигается еще на 7 дней.
- Условие для "сегодня понедельник":
- Если сегодня понедельник и текущее время >= 00:00, таймер смотрит следующий понедельник.
- Обновление значения только положительными числами:
- Если значения времени отрицательные, отображается
0
.
- Если значения времени отрицательные, отображается
Теперь таймер корректно обновляется, и после наступления понедельника начинает отсчитывать до следующего!
0 комментариев