Как сделать таймер обратного отсчета
Как сделать таймер обратного отсчета
Материал добавлен: 21 Августа 2024
Материал обновлен: 22 Августа 2024
- Особенности работы данного скрипта
- Пошаговая инструкция по добавлению блока таймера обратного отсчета
- Как добавить на страницы таймер с различным временем отсчета?
Блок таймера обратного отсчета позволяет отображать на сайте оставшееся время до определенного события. Такой блок может быть полезен для информирования посетителей о предстоящих акциях, распродажах, вебинарах и других важных событиях. Использование таймера обратного отсчета помогает создать чувство срочности и стимулирует их к более активным действиям на сайте.
Особенности работы данного скрипта
- Фиксированное время отсчета: Таймер начинает отсчет от фиксированной даты и времени, которые вы самостоятельно укажете. Это позволяет точно синхронизировать таймер с вашим событием или акцией.
- Постоянство таймера: Счетчик сохраняет дату окончания в localStorage, что означает, что при обновлении страницы или очистке кэша отсчет не сбрасывается и продолжается без прерываний.
- Автоматическое скрытие блока: Если фиксированная дата прошла или таймер истек, блок с таймером автоматически скрывается.
- Стильное отображение: Блок оформлен так, чтобы визуально выделяться, благодаря возможности разделять цифры на отдельные элементы, что делает отсчет более наглядным и привлекательным.
Пошаговая инструкция по добавлению блока таймера обратного отсчета
Пример №1: Большой блок с таймером
Данный блок помогает визуально выделить оставшееся время до окончания предложения, побуждая их быстрее принимать решения и действовать.
Демонстрация работы таймера №1
1. Создание глобального блока
Перейдите во вкладку "Дизайн" → "Управление дизайном" → "Редактирование шаблонов" → "Глобальные блоки" и создайте новый глобальный блок, в который будет добавлен следующий код для отображения таймера:
<div class="promo-container"> <div class="promo-block"> <div class="promo-wrapper"> <div class="promo-banner"> <img class="promo-img" src="https://timer.ucoz.net/img/banner.png" alt="banner"> <div class="promo-timer"> <div class="promo-text"> <h2>Распродажа коллекции "Элегантность"</h2> <p>Только до 31.08.2024 у вас есть шанс приобрести наши премиум духи по невероятным ценам.</p> </div> <div id="countdown-timer"> <div class="time-unit"> <div class="time-digits" id="days"></div> <div>Дней</div> </div> <div class="time-unit"> <div class="time-digits" id="hours"></div> <div>Часов</div> </div> <div class="time-unit"> <div class="time-digits" id="minutes"></div> <div>Минут</div> </div> <div class="time-unit"> <div class="time-digits" id="seconds"></div> <div>Секунд</div> </div> </div> <a href="#" class="button-link promo-btn" style="display:flex; margin: 0 auto; justify-content: center; width: 60%; margin-top: 10px;">Перейти в каталог</a> </div> </div> </div> </div> </div>
2. Добавление стилей
Скопируйте стили и добавьте их в шаблон "Таблица стилей (CSS)".
.promo-container {
max-width: 1240px;
padding: 0;
margin: 0 auto;
width: 100%;
}
.promo-block {
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
display: block;
margin-top: 16px;
}
.promo-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
box-sizing: content-box;
}
.promo-banner {
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
transition-property: transform;
display: block;
}
.promo-img {
border-radius: 16px;
display: block;
height: 100%;
inset: 0;
object-fit: cover;
position: absolute;
width: 100%;
}
.promo-text {
text-align: center;
}
.promo-text h2 {
margin-bottom: 5px;
font-size: 24px;
}
.promo-timer {
background-color: var(--tpl-dark-100);
border-radius: 12px;
margin: 16px;
max-width: 420px;
padding: 0px 20px 20px 20px;
position: relative;
float:right;
}
#countdown-timer {
display: flex;
justify-content: center;
margin-top: 10px;
}
.time-digits {
display: flex;
gap: 5px; /* Отступ между цифрами */
}
.time-digit {
font-weight: bold;
background-color: #507fff;
color: white;
padding: 5px 10px;
border-radius: 5px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.time-unit {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 5px; /* Добавлен отступ вокруг каждого элемента */
}
.time-unit span {
font-size: 30px;
font-weight: bold;
background-color: #3367f4;
color: white;
padding: 5px 10px;
border-radius: 5px;
}
.time-unit div {
font-size: 14px;
margin-top: 5px;
font-weight: bold;
}
@media (max-width: 768px) { /* Подстройка для мобильных устройств */
.promo-text h2 {
font-size: 18px;
}
.time-digit {
width: 32px; /* Уменьшите ширину, если нужно */
padding: 3px 6px; /* Подберите отступы в зависимости от уменьшенной ширины */
}
.promo-timer {
padding: 0 10px 20px 10px; }
}
3. Настройка скрипта
Далее перейдите в глобальный блок "Нижняя часть сайта" и вставьте скрипт, который отвечает за работу таймера:
<script>
document.addEventListener("DOMContentLoaded", function () {
const promoEndDateKey = 'promoEndDate';
const fixedStartDateStr = '2024-08-31T16:00:00'; // Задайте нужную фиксированную дату и время
const fixedStartDate = new Date(fixedStartDateStr);
const currentDate = new Date();
// Проверка валидности фиксированной даты
if (isNaN(fixedStartDate.getTime()) || fixedStartDate <= currentDate) {
// Если фиксированная дата не валидна или уже прошла, скрыть блок
document.querySelector(".promo-container").classList.add("u-hidden");
return;
}
// Получите дату окончания из localStorage
let promoEndDate = localStorage.getItem(promoEndDateKey);
if (!promoEndDate) {
// Установите дату окончания как фиксированную дату
const endDate = fixedStartDate.getTime();
localStorage.setItem(promoEndDateKey, endDate);
promoEndDate = endDate;
} else {
// Преобразуйте строку в число
promoEndDate = parseInt(promoEndDate, 10);
// Проверка, не истекло ли время
if (currentDate.getTime() > promoEndDate) {
// Если время истекло, удалите дату из localStorage
localStorage.removeItem(promoEndDateKey);
document.querySelector(".promo-container").classList.add("u-hidden");
return;
}
}
// Функция для обновления таймера
function updateTimer() {
const now = new Date().getTime();
const distance = promoEndDate - now;
// Вычислите дни, часы, минуты и секунды
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Форматирование времени
const formatTime = (value) => String(value).padStart(2, '0');
// Отображение времени
document.getElementById("days").innerHTML = splitDigits(formatTime(days));
document.getElementById("hours").innerHTML = splitDigits(formatTime(hours));
document.getElementById("minutes").innerHTML = splitDigits(formatTime(minutes));
document.getElementById("seconds").innerHTML = splitDigits(formatTime(seconds));
// Функция для разделения числа на отдельные цифры
function splitDigits(number) {
return number.split('').map(digit => `<span class="time-digit">${digit}</span>`).join('');
}
// Если таймер истек
if (distance < 0) {
clearInterval(timerInterval);
document.querySelector(".promo-container").classList.add("u-hidden");
// Удалите дату окончания из localStorage
localStorage.removeItem(promoEndDateKey);
}
}
// Обновите таймер сразу при загрузке страницы
updateTimer();
// Обновляйте таймер каждую секунду
const timerInterval = setInterval(updateTimer, 1000);
});
</script>
В завершение, вставьте созданный глобальный блок в соответствующий шаблон, чтобы он отображался в нужном вам месте на сайте.
Важно! В добавленном скрипте укажите дату и время (в формате ISO 8601), с которого начнется отсчет таймера, иначе блок не будет отображаться. Например: 2024-08-31T16:00:00
const fixedStartDateStr = '2024-08-31T16:00:00'; // Задайте нужную фиксированную дату и время
Пример №2: Таймер под шапкой сайта
Данный блок служит для уведомления пользователей о важных сроках, акциях или событиях, которые происходят на сайте. Этот элемент обычно располагается в верхней части страницы, что обеспечивает его видимость и привлекает внимание сразу после загрузки сайта.
Дополнительная особенность блока заключается в том, что он может быть закрыт пользователем, если он больше не актуален или мешает. При этом блок не будет отображаться некоторое время после закрытия, что помогает избежать навязчивого поведения и улучшает пользовательский опыт.
Демонстрация работы таймера №2
1. Создание глобального блока
Перейдите в раздел "Дизайн" → "Управление дизайном" → "Редактирование шаблонов" → "Глобальные блоки" и создайте новый глобальный блок. В этот блок добавьте код для отображения таймера:
<div class="promo-container"> <div class="promo-wrapper"> <div class="promo-banner"><img alt="banner" class="promo-img" src="https://timer.ucoz.net/img/banner.png" /> <div class="promo-content"> <div class="close-btn" onclick="closePopup()"><svg class="icon icon-tabler icons-tabler-outline icon-tabler-x" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0h24v24H0z" fill="none" stroke="none"></path> <path d="M18 6l-12 12"></path> <path d="M6 6l12 12"></path> </svg></div> <div class="promo-text"><strong style="font-size: 18px;">Cезонная распродажа</strong> <p style="text-align:center;">скидки до 50% на духи</p> </div> <div class="promo-timer"> <div id="countdown-timer"> <div class="time-unit"> <div class="time-digits" id="days"> </div> <div>Дней</div> </div> <div class="time-unit"> <div class="time-digits" id="hours"> </div> <div>Часов</div> </div> <div class="time-unit"> <div class="time-digits" id="minutes"> </div> <div>Минут</div> </div> <div class="time-unit"> <div class="time-digits" id="seconds"> </div> <div>Секунд</div> </div> </div> </div> <div class="promo-button"><a class="button-link promo-btn" href="#">Перейти в каталог</a></div> </div> </div> </div> </div>
2. Добавление стилей
Скопируйте стили и вставьте их в шаблон "Таблица стилей (CSS)":
.promo-container {
padding: 0;
margin: 0 auto;
width: 100%;
}
.promo-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
box-sizing: content-box;
}
.promo-banner {
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
transition-property: transform;
display: block;
padding: 10px;
}
.promo-img {
background-color: var(--tpl-dark-100, gray);
display: block;
height: 100%;
inset: 0;
object-fit: cover;
position: absolute;
width: 100%;
}
.promo-content {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--tpl-dark-100);
border-radius: 12px;
padding: 10px;
position: relative;
margin: 0 auto;
gap: 30px;
max-width: 800px;
}
#countdown-timer {
display: flex;
justify-content: center;
}
.time-digits {
display: flex;
gap: 5px;
}
.time-digit {
font-size: 24px;
font-weight: bold;
background-color: #507fff;
color: white;
padding: 5px 10px;
border-radius: 5px;
width: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.time-unit {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 5px;
}
.time-unit span {
font-size: 16px;
font-weight: bold;
background-color: #3367f4;
color: white;
padding: 5px 10px;
border-radius: 5px;
}
.time-unit div {
font-size: 12px;
margin-top: 5px;
font-weight: bold;
}
.close-btn {
position: absolute;
top: -4px; /* Поднять крестик над границей блока */
right: -4px; /* Выставить крестик в правый верхний угол */
cursor: pointer;
z-index: 1000; /* Установить z-index, чтобы крестик был поверх поп-ап окна */
}
.close-btn svg {
width: 24px;
height: 24px;
border-radius: 50%;
background-color: var(--tpl-dark-200);
padding: 4px;
}
.close-btn svg:hover {
background-color: var(--tpl-dark-300);
}
@media (max-width: 768px) {
.promo-content {
flex-direction: column;
gap: 10px;
}
.time-digit {
font-size: 18px;
width: 30px;
padding: 3px 6px;
}
h2 {
font-size: 24px;
}
}
3. Настройка скрипта
Затем перейдите в общий блок "Нижняя часть сайта" и добавьте скрипт, который управляет функционированием таймера.
<script>
document.addEventListener("DOMContentLoaded", function () {
const promoEndDateKey = 'promoEndDate';
const fixedStartDateStr = '2024-08-31T16:00:00'; // Задайте нужную фиксированную дату и время
const fixedStartDate = new Date(fixedStartDateStr);
const currentDate = new Date();
// Проверка валидности фиксированной даты
if (isNaN(fixedStartDate.getTime()) || fixedStartDate <= currentDate) {
// Если фиксированная дата не валидна или уже прошла, скрыть блок
document.querySelector(".promo-container").classList.add("u-hidden");
return;
}
// Получите дату окончания из localStorage
let promoEndDate = localStorage.getItem(promoEndDateKey);
if (!promoEndDate) {
// Установите дату окончания как фиксированную дату
const endDate = fixedStartDate.getTime();
localStorage.setItem(promoEndDateKey, endDate);
promoEndDate = endDate;
} else {
// Преобразуйте строку в число
promoEndDate = parseInt(promoEndDate, 10);
// Проверка, не истекло ли время
if (currentDate.getTime() > promoEndDate) {
// Если время истекло, удалите дату из localStorage
localStorage.removeItem(promoEndDateKey);
document.querySelector(".promo-container").classList.add("u-hidden");
return;
}
}
// Проверка, закрыт ли баннер по куки
function isPromoClosed() {
return document.cookie.split(';').some((item) => item.trim().startsWith('promoClosed='));
}
// Скрыть баннер, если куки установлены
if (isPromoClosed()) {
document.querySelector(".promo-container").classList.add("u-hidden");
return;
}
// Функция для обновления таймера
function updateTimer() {
const now = new Date().getTime();
const distance = promoEndDate - now;
// Вычислите дни, часы, минуты и секунды
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Форматирование времени
const formatTime = (value) => String(value).padStart(2, '0');
// Отображение времени
document.getElementById("days").innerHTML = splitDigits(formatTime(days));
document.getElementById("hours").innerHTML = splitDigits(formatTime(hours));
document.getElementById("minutes").innerHTML = splitDigits(formatTime(minutes));
document.getElementById("seconds").innerHTML = splitDigits(formatTime(seconds));
// Функция для разделения числа на отдельные цифры
function splitDigits(number) {
return number.split('').map(digit => `<span class="time-digit">${digit}</span>`).join('');
}
// Если таймер истек
if (distance < 0) {
clearInterval(timerInterval);
document.querySelector(".promo-container").classList.add("u-hidden");
// Удалите дату окончания из localStorage
localStorage.removeItem(promoEndDateKey);
}
}
// Обновите таймер сразу при загрузке страницы
updateTimer();
// Обновляйте таймер каждую секунду
const timerInterval = setInterval(updateTimer, 1000);
// Функция для закрытия баннера
window.closePopup = function() {
document.querySelector(".promo-container").classList.add("u-hidden");
document.cookie = "promoClosed=true; max-age=" + 24 * 60 * 60; // Установите куки на 24 часа
}
});
</script>
Заключительным шагом будет добавление созданного глобального блока в нужный шаблон, чтобы он отображался в выбранном вами месте на сайте.
Важно! В добавленном скрипте укажите дату и время (в формате ISO 8601), с которого начнется отсчет таймера, иначе блок не будет отображаться. Например: 2024-08-31T16:00:00
const fixedStartDateStr = '2024-08-31T16:00:00'; // Задайте нужную фиксированную дату и время
Выполнив эти шаги, вы сможете добавить на ваш сайт блок с таймером обратного отсчета, который будет автоматически обновляться и показывать оставшееся время до указанного события.
Как добавить на страницы таймер с различным временем отсчета?
Чтобы добавить таймеры с разным временем отсчета на разных страницах вашего сайта, следуйте этой инструкции:
1. Активируйте дополнительное поле в вашем модуле для хранения будущей даты и времени таймера в формате ISO 8601. Добавьте глобальный блок таймера в шаблон "Страница материала и комментариев к нему".
2. Вставьте измененный скрипт перед закрывающим тегом </body> в тот же шаблон:
<script>
document.addEventListener("DOMContentLoaded", function () {
// Замените $OTHER1$ на значение из дополнительного поля
const fixedStartDateStr = '$OTHER1$'; // Укажите фиксированную дату и время
const fixedStartDate = new Date(fixedStartDateStr);
const currentDate = new Date();
// Проверка валидности фиксированной даты
if (isNaN(fixedStartDate.getTime()) || fixedStartDate <= currentDate) {
// Если фиксированная дата не валидна или уже прошла, скрыть блок
document.querySelector(".promo-container").classList.add("u-hidden");
return;
}
// Установите дату окончания как фиксированную дату
const promoEndDate = fixedStartDate.getTime();
// Функция для обновления таймера
function updateTimer() {
const now = new Date().getTime();
const distance = promoEndDate - now;
// Вычислите дни, часы, минуты и секунды
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Форматирование времени
const formatTime = (value) => String(value).padStart(2, '0');
// Отображение времени
document.getElementById("days").innerHTML = splitDigits(formatTime(days));
document.getElementById("hours").innerHTML = splitDigits(formatTime(hours));
document.getElementById("minutes").innerHTML = splitDigits(formatTime(minutes));
document.getElementById("seconds").innerHTML = splitDigits(formatTime(seconds));
// Функция для разделения числа на отдельные цифры
function splitDigits(number) {
return number.split('').map(digit => `<span class="time-digit">${digit}</span>`).join('');
}
// Если таймер истек
if (distance < 0) {
clearInterval(timerInterval);
document.querySelector(".promo-container").classList.add("u-hidden");
}
}
// Обновите таймер сразу при загрузке страницы
updateTimer();
// Обновляйте таймер каждую секунду
const timerInterval = setInterval(updateTimer, 1000);
// Функция для закрытия баннера
window.closePopup = function() {
document.querySelector(".promo-container").classList.add("u-hidden");
}
});
</script>
3. При добавлении материала укажите дату и время для таймера в дополнительном поле. Например: 2024-08-31T16:00:00
Таким образом, каждый таймер будет отображать время, заданное в дополнительном поле при добавлении на соответствующей странице.
Как сделать таймер обратного отсчета