Выведем счётчик оставшихся дней до Нового года, а при наступлении события выведем новогодний баннер.
Вёрстка
<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]