Демо страница - Таймер акции

Описание

На этой странице демонстрируется работа универсального скрипта таймера акции. Полоска с таймером должна отображаться вверху страницы.

Вы можете закрыть полоску, нажав на крестик справа, или дождаться окончания таймера.

Примеры использования

Пример 1: Базовая настройка

<script src="promo-timer.js"></script>
<script>
    initPromoTimer({
        text: 'Специальное предложение!',
        endDate: '2026-02-01 23:59:59',
        backgroundColor: '#ff6b6b',
        buttonText: 'Участвовать',
        buttonLink: 'https://example.com'
    });
</script>
            

Пример 2: С кастомными цветами

<script src="promo-timer.js"></script>
<script>
    initPromoTimer({
        text: 'Новогодняя распродажа!',
        endDate: '2026-02-15 00:00:00',
        backgroundColor: '#4CAF50',
        showButton: true,
        buttonColor: '#FFC107',
        buttonTextColor: '#000000',
        buttonText: 'Купить сейчас',
        buttonLink: 'https://shop.example.com/sale'
    });
</script>
            

Пример 3: Без кнопки, только таймер

<script src="promo-timer.js"></script>
<script>
    initPromoTimer({
        text: 'Акция заканчивается через:',
        endDate: '2026-02-10 12:00:00',
        backgroundColor: '#2196F3',
        showButton: false,
        onComplete: 'show_message',
        completeMessage: 'Акция завершена!'
    });
</script>
            

Пример 4: С редиректом после завершения

<script src="promo-timer.js"></script>
<script>
    initPromoTimer({
        text: 'Последний день акции!',
        endDate: '2026-01-28 23:59:59',
        backgroundColor: '#E91E63',
        buttonText: 'Успеть купить',
        buttonLink: 'https://example.com/checkout',
        onComplete: 'redirect',
        redirectUrl: 'https://example.com/ended'
    });
</script>
            

Параметры настройки

text - Текст акции (строка)
startDate - Дата начала акции (формат: 'YYYY-MM-DD HH:mm:ss' или null для начала сразу)
endDate - Дата завершения акции (формат: 'YYYY-MM-DD HH:mm:ss')
onComplete - Действие после завершения: 'hide', 'show_message', 'redirect'
completeMessage - Сообщение после завершения (если onComplete = 'show_message')
redirectUrl - URL для редиректа (если onComplete = 'redirect')
backgroundColor - Цвет полоски (hex или rgb)
showButton - Показать кнопку (true/false)
buttonColor - Цвет кнопки (hex или rgb)
buttonTextColor - Цвет текста кнопки (hex или rgb)
buttonText - Текст на кнопке
buttonLink - Ссылка по кнопке акции
buttonLinkNewTab - Открывать ссылку в новой вкладке (true/false)
showCloseButton - Показывать крестик для закрытия (true/false)
saveCloseState - Сохранять состояние закрытия в localStorage (true/false)
showOnceAfterClose - Показывать полоску только один раз после закрытия (true/false)

Демо контент

Это демонстрационная страница для проверки работы таймера акции. Полоска с таймером должна быть видна вверху страницы.

Вы можете протестировать различные функции:

Закрытие полоски через крестик
Отображение таймера обратного отсчета
Переход по ссылке кнопки
Адаптивность на мобильных устройствах

🎉 Демо страница с таймером акции