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

Задан 1 месяц назад
Просмотрен 36 раз
1

Как сделать таймер обратного отсчета в тильде или виджете гк, чтобы каждый час таймер перезапускался и показывал остаток времени до ближайшего часа, как здесь https://udalennkastore.store/markbarton ?

обратный отсчет
таймер
Сделаем GetOverflow лучше!
Проголосуйте 🔼 за полезные или 🔽 за бесполезные ответы.
1 ответ
1

В месте, где должен быть таймер нужно добавить элемент <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>
Ваш ответ