Простой таймер на JavaScript для акций и скидок

Сегодня вы узнаете, как создать простой таймер для вашего лэндинга, который будет отсчитывать время, оставшееся до окончания ограниченного предложения. Это отличный способ создать у пользователей чувство срочности и побудить их к действию!

Конечно, создадим мы самый простой таймер с минимальным функционалом и простой настройкой, который будет запускаться при заходе пользователя на страницу. Использовать будем только HTML и JavaScript.

Зачем нужен таймер?

Таймеры на лэндингах помогают создать эффект нехватки времени, что может значительно увеличить конверсию. Пользователи, видя, что предложение ограничено во времени, чаще принимают решение о покупке или регистрации.

Код таймера

Приведенный ниже код разместите в том месте лэндинга, где должен выводится таймер:

<div id="timer" style="font-size: 24px;">
	Оставшееся время: <span id="time"></span>
</div>

<script>
// Устанавливаем общее время таймера в секундах (например, 1 час = 3600 секунд)
let totalTime = 3600; // Вы можете изменить это время по вашему усмотрению

// Получаем элемент, в котором будет отображаться время
const timeDisplay = document.getElementById('time');

// Функция для обновления таймера
function updateTimer() {
    // Берем текущее время
    let hours = Math.floor(totalTime / 3600);
    let minutes = Math.floor((totalTime % 3600) / 60);
    let seconds = totalTime % 60;

    // Форматируем вывод
    timeDisplay.textContent = `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;

    // Уменьшаем общее время на 1 секунду
    if (totalTime > 0) {
        totalTime--;
    } else {
        clearInterval(timerInterval);
        timeDisplay.textContent = "Время истекло!";
    }
}

// Функция для добавления ведущих нулей
function pad(num) {
    return num < 10 ? '0' + num : num;
}

// Запускаем таймер
const timerInterval = setInterval(updateTimer, 1000);
</script>

Как изменить время таймера

Чтобы изменить время, на которое запускается таймер, вам нужно просто изменить значение переменной «totalTime» в секундах. Например:

• Для 30 минут: let totalTime = 1800;
• Для 15 минут: let totalTime = 900;
• Для 5 минут: let totalTime = 300;

Как изменить внешний вид таймера

Таймер отображается в элементе с «id="timer"» которому можете прописывать любые стили для изменения внешнего вида таймера. Также, можете отредактировать или удалить фразу «Оставшееся время:»

Если отсчет завершен выводится сообщение «Время истекло!».

Итог

Теперь у вас есть простой таймер, который будет отсчитывать время на вашем лэндинге! Вы можете добавить дополнительные функции, такие как уведомления при истечении времени или анимации, чтобы сделать его еще более привлекательным. Надеюсь, этот пост был полезен для вас, и вы сможете легко внедрить таймер на свой сайт.

Опубликовано: 04.10.2024