Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Смена блока по времени суток в Tilda
OUR COMPANY
c 7 до 12
Anything you've even dreamed about is possible to realise just at the moment when you decided to win.
OUR COMPANY
c 12 до 19
Anything you've even dreamed about is possible to realise just at the moment when you decided to win.
OUR COMPANY
c 19 до 24
Anything you've even dreamed about is possible to realise just at the moment when you decided to win.
OUR COMPANY
c 0 до 7
Anything you've even dreamed about is possible to realise just at the moment when you decided to win.

Смена блока по времени суток в Tilda

Пример позволяет показывать нужный блок в разное время суток
1
Создали 4 блока для замены, задали им классы
uc-time-block-1
uc-time-block-2
uc-time-block-3
uc-time-block-4
2
Настроили логику видимости блоков

Блок - 1 пусть показывается с 7-12
Блок - 2 пусть показывается с 12-19
Блок - 3 пусть показывается с 19-24
Блок - 4 пусть показывается с 0-7
3
Добавили код на страницу в блок Другое - Т123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Смена блока по времени суток в Tilda
Фрагмент видео
Библиотека для примера
<script>
document.addEventListener("DOMContentLoaded", function() {
    (function () {
    
        
        const schedule = {
            "uc-time-block-1": ["07:00", "12:00"],
            "uc-time-block-2": ["12:00", "19:00"],
            "uc-time-block-3": ["19:00", "00:00"],
            "uc-time-block-4": ["00:00", "07:00"]
        };

        const TIMEZONE_OFFSET = 3; // Москва (UTC+3)

        
        function parseTime(timeStr) {
            const [hours, minutes] = timeStr.split(":").map(Number);
            return hours * 60 + minutes;
        }

        
        function getCurrentMinutes() {
            const now = new Date();
            const utc = now.getTime() + (now.getTimezoneOffset() * 60000);
            const localTime = new Date(utc + (3600000 * TIMEZONE_OFFSET));
            return localTime.getHours() * 60 + localTime.getMinutes();
        }

        
        function isTimeInRange(currentMinutes, startStr, endStr) {
            let startMinutes = parseTime(startStr);
            let endMinutes = parseTime(endStr);
            
        
            if (endMinutes === 0) {
                endMinutes = 24 * 60;
            }
            
            if (startMinutes <= endMinutes) {
        
                return currentMinutes >= startMinutes && currentMinutes < endMinutes;
            } else {
        
                return currentMinutes >= startMinutes || currentMinutes < endMinutes;
            }
        }

        
        function hideAllBlocks() {
            document.querySelectorAll('div[class*="uc-time-block"]').forEach(block => {
                block.classList.add('hide-time');
            });
        }

        function showBlock(blockClass) {
            const blocks = document.querySelectorAll(`div[class*="${blockClass}"]`);
            blocks.forEach(block => {
                block.classList.remove('hide-time');
            });
        }
        
        function checkSchedule() {
            const currentMinutes = getCurrentMinutes();
            let activeBlock = null;

        
            for (const [blockClass, [startTime, endTime]] of Object.entries(schedule)) {
                if (isTimeInRange(currentMinutes, startTime, endTime)) {
                    activeBlock = blockClass;
                    break;
                }
            }

            hideAllBlocks();
            if (activeBlock) {
                showBlock(activeBlock);
            }
        }
        checkSchedule();
        setInterval(checkSchedule, 10000);
        
    })();    
});    
</script>

<style>
div[class*="uc-time-block"].hide-time {
    opacity: 0;
    pointer-events: none;
    height: 0;
    padding: 0 !important;
    overflow: hidden;
}
</style>
Made on
Tilda