Используйте следующую версию скрипта, которая корректно рассчитывает оставшееся время:
<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.
- Если значения времени отрицательные, отображается
Теперь таймер корректно обновляется, и после наступления понедельника начинает отсчитывать до следующего!