beget banner 468x60beget banner 728x90beget banner 930x180jivo banner 468x60jivo banner 728x90jivo banner 930x180skillbox banner 468x60skillbox banner 728x90skillbox banner 930x180

Как на JQuery сделать визуальный таймер на один час после указанного времени в data-time-created

Для создания визуального таймера на основе времени, указанного в атрибуте data-time-created, можно использовать jQuery. Вот пример реализации:

Код HTML:

<div class="order-counter" data-time-created="2024-12-11T03:21:21.893Z"></div>

Код jQuery:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
    // Получаем элемент с атрибутом data-time-created
    const $counter = $('.order-counter');
    
    // Получаем время из атрибута data-time-created
    const createdTime = $counter.data('time-created');
    
    // Парсим время и добавляем 1 час
    const endTime = new Date(new Date(createdTime).getTime() + 60 * 60 * 1000);
    
    // Обновляем таймер каждую секунду
    const timerInterval = setInterval(() => {
        const currentTime = new Date();
        const timeLeft = endTime - currentTime;

        // Если время вышло
        if (timeLeft <= 0) {
            clearInterval(timerInterval);
            $counter.text('Время истекло!');
            return;
        }

        // Вычисляем оставшееся время
        const hours = Math.floor((timeLeft / (1000 * 60 * 60)) % 24);
        const minutes = Math.floor((timeLeft / (1000 * 60)) % 60);
        const seconds = Math.floor((timeLeft / 1000) % 60);

        // Форматируем оставшееся время и отображаем
        const timeString = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        $counter.text(`Осталось времени: ${timeString}`);
    }, 1000);
});
</script>

Что делает скрипт:

  1. Считывает значение времени создания из атрибута data-time-created.
  2. Добавляет к указанному времени 1 час.
  3. Каждую секунду вычисляет оставшееся время и обновляет текст внутри элемента .order-counter.
  4. Когда время истекает, таймер останавливается и выводит сообщение Время истекло!.

Результат:

Элемент <div class="order-counter"> будет отображать обратный отсчет в формате ЧЧ:ММ:СС. После окончания времени он покажет сообщение, что время истекло.

Если на странице может быть несколько элементов с классом .order-counter, нужно обработать каждый элемент индивидуально. Вот как можно переписать код:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
    // Для каждого элемента с классом .order-counter
    $('.order-counter').each(function () {
        const $counter = $(this); // Текущий элемент
        const createdTime = $counter.data('time-created'); // Время из data-time-created
        const endTime = new Date(new Date(createdTime).getTime() + 60 * 60 * 1000); // Время окончания

        // Обновляем таймер каждую секунду для текущего элемента
        const timerInterval = setInterval(() => {
            const currentTime = new Date();
            const timeLeft = endTime - currentTime;

            // Если время вышло
            if (timeLeft <= 0) {
                clearInterval(timerInterval);
                $counter.text('Время истекло!');
                return;
            }

            // Вычисляем оставшееся время
            const hours = Math.floor((timeLeft / (1000 * 60 * 60)) % 24);
            const minutes = Math.floor((timeLeft / (1000 * 60)) % 60);
            const seconds = Math.floor((timeLeft / 1000) % 60);

            // Форматируем оставшееся время и обновляем текст
            const timeString = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
            $counter.text(`Осталось времени: ${timeString}`);
        }, 1000);
    });
});
</script>

Что изменено:

  1. Используется .each(), чтобы пройтись по всем элементам с классом .order-counter.
  2. Для каждого элемента создается свой собственный таймер (setInterval) и вычисления выполняются индивидуально.
  3. Все переменные, связанные с таймером, привязаны к текущему элементу через $(this).

Результат:

Каждый элемент .order-counter на странице будет отсчитывать свое оставшееся время индивидуально. После истечения времени для конкретного таймера он будет показывать сообщение Время истекло!.

Этот подход масштабируется для любого количества таймеров на странице.

jivo banner 480x320jivo banner 728x90jivo banner 120x600flexbe banner 480x320flexbe banner 728x90flexbe banner 120x600skillbox banner 480x320skillbox banner 728x90skillbox banner 120x600

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Как на jQuery написать код, который при клике на кнопку будет копировать текущий url сайта?

Вот пример кода на jQuery, который копирует текущий URL сайта в буфер обмена при нажатии на кнопку с классом copy-current-url: Как это работает: Этот подход работает в большинстве браузеров. Однако, если вы используете современные методы, можно также заменить document.execCommand на API navigator.clipboard, если поддержка браузера это позволяет.
Подробнее

Как на jQuery отслеживать событие ввода символов?

Для отслеживания события ввода символов на jQuery можно использовать событие input. Оно срабатывает каждый раз, когда происходит изменение в поле ввода (например, при наборе текста или удалении символов). Вот пример: В этом примере: Если нужно отследить событие только при изменении текста (например, при нажатии клавиш), можно использовать событие keyup, но input более универсально, так как…
Подробнее

Как на jQuery можно отслеживать изменение текстового тега

В jQuery изменение текста внутри тега можно отслеживать несколькими способами, в зависимости от того, как это изменение происходит. Основной подход — это использовать MutationObserver, так как он позволяет отслеживать изменения в DOM. Вот пример: 1. Использование MutationObserver 2. Событие через пользовательское изменение Если текст изменяется через jQuery или JavaScript (например, с помощью .text() или .html()),…
Подробнее