Как сделать таймер обратного осчета в тильде или виджете гк?

В месте, где должен быть таймер нужно добавить элемент <div id="countdown"></div>

А вот сам скрипт:

<script>
    document.addEventListener("DOMContentLoaded", function() {
        function updateCountdown() {
            const now = new Date();
            const nextHour = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours() + 1, 0, 0, 0);

            const timeDifference = nextHour - now;

            const hours = String(Math.floor(timeDifference / (1000 * 60 * 60))).padStart(2, '0');
            const minutes = String(Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60))).padStart(2, '0');
            const seconds = String(Math.floor((timeDifference % (1000 * 60)) / 1000)).padStart(2, '0');

            document.getElementById("countdown").innerText = `${hours}:${minutes}:${seconds}`;
        }

        setInterval(updateCountdown, 1000);
        updateCountdown(); // Запуск сразу после загрузки страницы
    });
</script>

Здравствуйте! Также есть удобный веб-сервис : https://megatimer.ru/?ysclid=m2fhbe3wea717962257

Можно менять шрифты, размер, цвет текста в удобном интерфейсе. Чтобы занести код на ленд. Особенно на тильде очень удобно разместить через html-блок.

Создаете таймер в сервисе - получаете код. Размещаете в zero-блоке, добавляете html-script и вставляете с сервиса код - опубликовать и готово.

Чтобы создать таймер обратного отсчета, который каждый час перезапускается и показывает остаток времени до ближайшего часа, вам можно воспользоваться следующими шагами, особенно если вы работаете с платформами Tilda или GetCourse: Использование JavaScript и HTML Создайте HTML-структуру для вашего таймера. Например: xml <div id="timer"></div>

Добавьте JavaScript-код, который будет обновлять таймер каждую секунду и перезапускать его каждый час: javascript function updateTimer() { const now = new Date(); const nextHour = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours() + 1, 0, 0, 0); const timeLeft = nextHour - now;

const hours = Math.floor(timeLeft / 3600000);
const minutes = Math.floor((timeLeft % 3600000) / 60000);
const seconds = Math.floor((timeLeft % 60000) / 1000);

document.getElementById('timer').innerText = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

setTimeout(updateTimer, 1000);

}

updateTimer();

Интеграция в Tilda или GetCourse Tilda Вставьте HTML-код в блок с HTML-контентом на вашей странице в Tilda. Добавьте JavaScript-код в настройках страницы в разделе "JavaScript" или через встроенный редактор кода. GetCourse Создайте виджет с HTML-контентом и вставьте туда ваш HTML-код. Добавьте JavaScript-код в настройках виджета или через встроенный редактор кода в GetCourse. Пример из GetCourse Если вы используете GetCourse, вы можете создать виджет с необходимым кодом, как описано в вопросе на сайте GetCourse3. Этот подход позволит вам интегрировать таймер прямо в вашу страницу на платформе.

Рекомендую Вам сервис https://megatimer.ru/ Он дает код, который можно вставить и в ГК, и на Тильду через HTML