/ Scripts & jquery / Обратный отсчёт до Нового года

Обратный отсчёт до Нового года

HIT

16.01.2025

1046

Выведем счётчик оставшихся дней до Нового года, а при наступлении события выведем новогодний баннер.

Вёрстка

<div class="ny-counter">
	<div class="clock-builder-output"></div>
</div>

Скрипты и стили

<link type="text/css" rel="stylesheet" href="/wp-content/themes/meisterwerk-4/css/flipclock.css" />
<script type="text/javascript" src="/wp-content/themes/meisterwerk-4/js/flipclock.js"></script>

Скачать можно тут.

Кастомизируем стили:

body .flip-clock-wrapper ul li a div div.inn, 
body .flip-clock-small-wrapper ul li a div div.inn {color: #CCCCCC; background-color: #333333;} 

body .flip-clock-dot, body .flip-clock-small-wrapper .flip-clock-dot {background: #323434;} 

body .flip-clock-wrapper .flip-clock-meridium a, 
body .flip-clock-small-wrapper .flip-clock-meridium a {color: #323434;}

Инициализация

jQuery(document).ready(function() {

    FlipClock.Lang.Custom = { days:'Дней', hours:'Часов', minutes:'Минут', seconds:'Секунд' };

    var clock;
    clock = jQuery('.clock-builder-output').FlipClock({
        clockFace: 'DailyCounter', //вид счетчика (с количеством дней)
        autoStart: false, //Отключаем автозапуск
        countdown: true	, //Отсчет назад
        language: 'Custom',
        callbacks: { //Действие после окончания отсчета
            stop: function() {
                jQuery('.ny-counter').html('<h2 class="ny-title">С Новым годом!</h2>');
            }
        }
    });
    
    var target = "2025-01-01T00:00:00"; //Дата до которой нужен таймер
    var targetDate = new Date(target); //Переводим в мил. секунды
    var nowDate = Date.now(); //Текущая дата и время в мил. секундах
    var time = (targetDate - nowDate) / 1000; //Получаем секунды

    if ( time > 0 ) {
        jQuery('.ny-counter').prepend('<h2>До Нового года осталось:</h2>');
        clock.setTime(time); //Устанавливаем нужное время в секундах
        clock.setCountdown(true); //Устанавливаем отсчет назад
        clock.start(); //Запускаем отсчет
    } else {
        jQuery('.ny-counter').html('<h2 class="ny-title">С Новым годом!</h2>');
    }


width = jQuery(window).width();
if (width <= 992) {
    jQuery('.clock-builder-output').addClass('flip-clock-small-wrapper');
}

});
[site-socialshare]
  • Комментарии
  • Вложения

Добавить комментарий

Notice: Функция WP_Styles::add вызвана неправильно. Стиль с дескриптором "editor-buttons" был поставлен в очередь с незарегистрированными зависимостями: dashicons. Дополнительную информацию можно найти на странице «Отладка в WordPress». (Это сообщение было добавлено в версии 6.9.1.) in /home/t/tiberi6w/opttour.ru/public_html/wp-includes/functions.php on line 6170

Пока нет комментариев. Будь первым!

Обратный отсчёт до Нового года
Watermark для изображений товаров (обзор плагинов)
Рекомендации для васWatermark для изображений товаров (обзор плагинов)Opttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.