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

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

16.01.2025

37

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

Вёрстка

<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]
  • Комментарии
  • Вложения

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

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

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