Виджет реального времени на сайте Webflow

пошаговая инструкция создания виджета реального времени на сайте webflow

Если желаешь добавить подобный виджет на свой сайт, это пошаговое руководство о том, как это сделать с помощью Webflow, для тебя! Все, что тебе нужно сделать, это добавить наш код JavaScript, связать его с элементами на странице и опубликовать. Иззи!

Шаг 1. Добавь наш JavaScript код на страницу

Собственно, вот КОД! Просто скопируй его, установи UTC для своего города и вставь код на страницу в webflow:

<script>
    document.addEventListener("DOMContentLoaded", () => {
            function display_ct() {

                const d = new Date(); 
                let localTime = d.getTime(); 
                let localOffset = d.getTimezoneOffset() * 60000; 

                let utc = localTime + localOffset;
                let offsetDub = 4; // UTC of Dubai is +04.00
                let dubai = utc + (3600000 * offsetDub);
                let offsetMos = 3; // UTC of Moscow is +03.00
                let moscow = utc + (3600000 * offsetMos);

                let moscowGetTime = new Date(moscow);
                let moscowTime = ('0' + moscowGetTime.getHours()).slice(-2) + ":" + ('0' + moscowGetTime.getMinutes()).slice(-2) + ":" + ('0' + moscowGetTime.getSeconds()).slice(-2);
                let moscowTimeNow = moscowTime.toLocaleString();

                let dubaiGetTime = new Date(dubai);
                let dubaiTime = ('0' + dubaiGetTime.getHours()).slice(-2) + ":" + ('0' + dubaiGetTime.getMinutes()).slice(-2) + ":" + ('0' + dubaiGetTime.getSeconds()).slice(-2);
                let dubaiTimeNow = dubaiTime.toLocaleString();

                document.getElementById('ct').innerHTML = moscowTimeNow;
                document.getElementById('ct2').innerHTML = dubaiTimeNow;

                let t = setTimeout(function () { display_ct() }, 1000);
                
            }
        display_ct();
    });
</script>

Например, если твой офис в Сингапуре, то часовой пояс будет UTC +8. Просто поменяй значение переменной offsetDub. Будет лучше, если переименуешь и саму переменную. Вот пример для Сингапура, чтобы проследить, где нужно внести изменения:

<script>
    document.addEventListener("DOMContentLoaded", () => {
            function display_ct() {

                const d = new Date(); 
                let localTime = d.getTime(); 
                let localOffset = d.getTimezoneOffset() * 60000; 

                let utc = localTime + localOffset;
                let offsetSyn = 8; // UTC of Syngapore is +08.00
                let syngapore = utc + (3600000 * offsetSyn);
                let offsetMos = 3; // UTC of Moscow is +03.00
                let moscow = utc + (3600000 * offsetMos);

                let moscowGetTime = new Date(moscow);
                let moscowTime = ('0' + moscowGetTime.getHours()).slice(-2) + ":" + ('0' + moscowGetTime.getMinutes()).slice(-2) + ":" + ('0' + moscowGetTime.getSeconds()).slice(-2);
                let moscowTimeNow = moscowTime.toLocaleString();

                let synGetTime = new Date(syngapore);
                let synTime = ('0' + synGetTime.getHours()).slice(-2) + ":" + ('0' + synGetTime.getMinutes()).slice(-2) + ":" + ('0' + synGetTime.getSeconds()).slice(-2);
                let synTimeNow = synTime.toLocaleString();

                document.getElementById('ct').innerHTML = moscowTimeNow;
                document.getElementById('ct2').innerHTML = synTimeNow;

                let t = setTimeout(function () { display_ct() }, 1000);
                
            }
        display_ct();
    });
</script>

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

1. Как кастомный код перед закрывающем тегом </body>.
В разделе webflow.com/design/your_site найди блок Page menu (или жми P). Выбери страницу, на которую хочешь добавить виджет и нажми иконку редактирования. В блоке Custom code вставь код before the </body>. Не забудь сохранить.

Более подробно о размещении кастомного кода можно узнать из обучающих материалов webflow.

2. Как встроенный блок на странице (Embed block).
Открывай главное меню, жми A, чтобы добавить элемент. В блоке Advanced найдешь элемент Embed, в который и вставишь наш код. Сохрани и закрой окно, затем перетащи блок в конец страницы. В предварительном просмотре ты не увидишь изменений, но после публикации чудо произойдет!

Шаг 2. свяжи код с элементом на странице

Чтобы отобразить местное время Москвы и Дубая, все что тебе осталось сделать, это связать код с элементом на странице. Выбери нужный тег и добавь ему атрибут ID в настройках (жми D). Мы используем id="ct" для московского времени и id="ct2" для Дубая. Затем снова жми Опубликовать и сверяй часы!

ШАГ 3. шутка, их всего два

***

понять код и сделать свои настройки

Разберем подробнее код. Первым делом вызываем функцию new Date(), чтобы получить текущую дату, затем получаем время getTime(). Отлично! Теперь мы можем получить разницу со временем по Гринвичу getTimezoneOffset().

        
        // get current date
        const d = new Date(); 

        // get the timestamp for the date, milliseconds
        let localTime = d.getTime(); 

        // returns the difference between UTC and the local time zone, turn it in milliseconds
        let localOffset = d.getTimezoneOffset() * 60000;

Мы рассчитываем местное время в миллисекундах для каждого офиса.

 
    //  calculate local time, milliseconds   
    let utc = localTime + localOffset;

    // calculate time for Dubai, turn in milliseconds
    let offsetDub = 4; // UTC of Dubai is +04.00 hours
    let dubai = utc + (3600000 * offsetDub);

    // calculate time for Moscow, turn in milliseconds
    let offsetMos = 3; // UTC of Moscow is +03.00 hours
    let moscow = utc + (3600000 * offsetMos);

Устнавливаем формат отображения. Пошла жара! Нам требуется только время, поэтому используем функцию getHours(), getMinutes() и getSeconds(). И мы получим что-то типо "6:29:1", но мы-то хотим, чтобы впереди шел 0, и мы добавляем "0" и тогда возьмем от результата только две последние цифры. Например, часы: "0" + "6" дадут 06, а функция slice(-2) вернет последние 2 цифры, поэтому мы получим “06” часов. Посмотрим минуты: “0” + “29” → 029, затем берем последние две цифры – boom! у нас 29 минут, как мы хотели.

        
        let moscowGetTime = new Date(moscow); // we get date like "Fri Feb 10 2023 06:29:01 GMT+0300 (Москва, стандартное время)" 
        // We need only time, so we can do that:
        let moscowTime = (moscowGetTime.getHours()) + ":" + (moscowGetTime.getMinutes()) + ":" + (moscowGetTime.getSeconds());  // returns > "6:29:1"
        // But we want zero first, so...
        let moscowTime = ('0' + moscowGetTime.getHours()).slice(-2) + ":" + ('0' + moscowGetTime.getMinutes()).slice(-2) + ":" + ('0' + moscowGetTime.getSeconds()).slice(-2);
        let moscowTimeNow = moscowTime.toLocaleString();

        let dubaiGetTime = new Date(dubai);
        let dubaiTime = ('0' + dubaiGetTime.getHours()).slice(-2) + ":" + ('0' + dubaiGetTime.getMinutes()).slice(-2) + ":" + ('0' + dubaiGetTime.getSeconds()).slice(-2);
        let dubaiTimeNow = dubaiTime.toLocaleString();

OK, далее. Функция innerHTML заменит текст в наших элементах на странице (мы же добавили им ID атрибуты, поэтому они найдутся).

        
        // find element with this ID attribute and replace inner content        
        document.getElementById('ct').innerHTML = moscowTimeNow;
        document.getElementById('ct2').innerHTML = dubaiTimeNow;

Последнее, но самое важное: будем вызывать нашу функцию каждую секунду setTimeout() что сделать наш виджет максимально живым!

        
        let t = setTimeout(function () { display_ct() }, 1000);

на этом всЁ

Добавление виджета с реальным временем на сайт, пожалуй, самый простой способ помочь посетителям узнать, который час в ващих офисах, особенно, если оператор не может быть на связи 24 часа в сутки. Также это классный способ обратить внимание на местоположение офисов. Так почему бы не попробовать это реализовать?)

Есть вопрос? Напишите нам в телеграм @fiiire_branding или на почту in@fiiire.design