Для создания визуального таймера на основе времени, указанного в атрибуте 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>
Что делает скрипт:
- Считывает значение времени создания из атрибута
data-time-created
. - Добавляет к указанному времени 1 час.
- Каждую секунду вычисляет оставшееся время и обновляет текст внутри элемента
.order-counter
. - Когда время истекает, таймер останавливается и выводит сообщение
Время истекло!
.
Результат:
Элемент <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>
Что изменено:
- Используется
.each()
, чтобы пройтись по всем элементам с классом.order-counter
. - Для каждого элемента создается свой собственный таймер (
setInterval
) и вычисления выполняются индивидуально. - Все переменные, связанные с таймером, привязаны к текущему элементу через
$(this)
.
Результат:
Каждый элемент .order-counter
на странице будет отсчитывать свое оставшееся время индивидуально. После истечения времени для конкретного таймера он будет показывать сообщение Время истекло!
.
Этот подход масштабируется для любого количества таймеров на странице.