2025-01-22 12:27 Прочее

Таймер в зеро-блоке на Тильде

Код таймера в Zero Block на Tilda

Таймер – важный элемент для многих сайтов, особенно тех, где требуется акцентировать внимание пользователей на ограниченных по времени акциях, распродажах или специальных предложениях. В конструкторе сайтов Tilda существует встроенный блок Zero Block, который позволяет добавлять различные элементы, включая таймер обратного отсчета. Однако стандартный функционал может показаться недостаточным для некоторых задач. Вот почему модификация таймера становится актуальной темой.

Инструкция:

Создайте зеро-блок с 2-мя HTML элементами
Добавляем в 1 элемент код из инструкции "таймер в зеро-блоке основной" этот элемент будет отображать сам таймер, его нужно адаптировать под все разрешения.
Во второй блок добавляем код с настройками и стилями.
При необходимости можно отредактировать шрифт, масштабирование и позиционирование, поставить дату.
Элемент со стилями выносим за границы зеро блока, желательно поместить его сверху на зеро блоком.
Сохраняем и обновляем страницу

<!-- Таймер в зеро блоке основной Cubeteam.ru-->
<!DOCTYPE html>
<html lang="ru">

<body>

<div class="timer-container">
    <div class="timer">
        <div class="time-section">
            <span class="value" id="days">0</span>
            <div class="label">дней</div>
        </div>
        <span>:</span>
        <div class="time-section">
            <span class="value" id="hours">0</span>
            <div class="label">часов</div>
        </div>
        <span>:</span>
        <div class="time-section">
            <span class="value" id="minutes">0</span>
            <div class="label">минут</div>
        </div>
        <span>:</span>
        <div class="time-section">
            <span class="value" id="seconds">0</span>
            <div class="label">секунд</div>
        </div>
    </div>
</div>

<!-- Кнопка для сброса таймера <button onclick="resetTimer()">Сбросить таймер</button> -->


<!-- Подключаем скрипт -->
<script src="timer.js"></script>
</body>
</html>

<!-- Таймер в зеро блоке настройки и стили Cubeteam.ru-->
<style>
    
    /* Подключаем шрифт Arial для всего тела документа */
body {
     font-family: Arial, sans-serif;
    
   
}

/* Контейнер для масштабирования таймера */
.timer-container {
    width: 100%;            /* Устанавливаем ширину контейнера */
    max-width: 600px;       /* Ограничиваем максимальную ширину */
    padding: 20px;
    text-align: center;
    transform: scale(1);    /* Начальный масштаб */
}

/* Стили для таймера */
.timer {
    font-size: 3em;
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.time-section {
    text-align: center;
}

.value {
    font-weight: bold;
}

.label {
    font-size: 0.5em;
    color: grey;
}
</style>

<script>
let countdownInterval;
const countdownDuration = 3 * 24 * 60 * 60 * 1000; // 3 дня в миллисекундах

// Проверяем, сохранено ли конечное время отсчета в localStorage
let countdownEnd = localStorage.getItem("countdownEnd");

// Если конечное время отсутствует или истекло, устанавливаем новое конечное время отсчета на 3 дня вперед
if (!countdownEnd || Date.now() > countdownEnd) {
    countdownEnd = Date.now() + countdownDuration;
    localStorage.setItem("countdownEnd", countdownEnd);
} else {
    countdownEnd = parseInt(countdownEnd);
}

// Функция для обновления таймера
function updateTimer() {
    const now = Date.now();
    const distance = countdownEnd - now;

    if (distance <= 0) {
        // Если отсчет закончился, устанавливаем новое конечное время на следующие 3 дня
        countdownEnd = Date.now() + countdownDuration;
        localStorage.setItem("countdownEnd", countdownEnd); // Обновляем значение в localStorage
    }

    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);

    document.getElementById("days").innerText = days;
    document.getElementById("hours").innerText = hours.toString().padStart(2, '0');
    document.getElementById("minutes").innerText = minutes.toString().padStart(2, '0');
    document.getElementById("seconds").innerText = seconds.toString().padStart(2, '0');
}

// Запускаем таймер с обновлением каждую секунду
countdownInterval = setInterval(updateTimer, 1000);


</script>

Команда Cubeteam