FlipClock.js таймер обратного отсчета и начать вовремя
Однажды при разработки сайта мне понадобилось сделать Таймер обратного отсчёта до конца акции, после окончания которого заканчивалась акция.
Как я создавал таймер обратного отсчёта с помощью FlipClock.js Доброго времени суток. Сегодня я раскраска как делал таймер обратного отсчёта с отображением с 9:00 до 19:00, при помощи скрипта FlipClock.js.
Задача: в форме обратной связи выводить надпись об акции со скидкой 50%. Но надпись 50% должна отображаться по таймеру, с 9:00 до 19:00. Для решения это задачи я выбрал скрипт таймера FlipClock.js, и немного доработал его вывод. Был взять стандартный пример этого скрипта отсчёт до нового года countdown-to-new-years и переделал его по отсчёт до 19:00.
// Объявляем переменные var clock, now = new Date(), // сегодняшняя дата startd = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 9),// время старта, 9 - часы end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 19),// время окончания, 19 - часы diff = end.getTime() / 1000 - now.getTime() / 1000; // расчёт времени работы $(document).ready(function() { clock = $('.clock').FlipClock(diff,{ // вызов таймера с рассчитанным временем работы diff clockFace: 'HourlyCounterFace', // формат времени language:'ru', // формат языка надписей countdown: true // обратный отсчёт }); // тут мы делаем проверку для вывода блока таймера с классом .clock и надписи с классом .pocent. // И выводим во время с 9:00 до 19:00, в остальное время скрываем. if ( now >= startd && now <= end ) { $(".clock").show(); $(".pocent").show(); } else{ $(".clock").hide(); $(".procent").hide(); } });