Веб-дизайнеру
Веб-разработчику
Дополнительно
Таймер JQuery обратного отсчета времени + дизайн!
Скачать
Демо
↓ Также Вам будет интересно ↓
Цветное меню аккордеон на CSS и JQuery
Color Picker (цветовая палитра цветов) – JQuery плагин
Анимированная галерея изображений с эффектами и “сеткой”!
Мини галерея изображений с автопрокруткой | JQuery плагин!
3D красивая форма подписки на CSS3 + Javascript
3D слайдер на CSS3 и JQuery / 3 примера + автопрокрутка
При создании нового сайта или запуске нового проекта, может возникнуть потребность в расчете оставшегося времени. JQuery таймер обратного отсчета + в сочетании с полем для ввода E-mail адреса, может принести хороший результат для Вашего проекта или даже регистрации и продажи.
Сегодня мы собираемся создать аккуратный таймер JQuery плагин для отображения таймера обратного отсчета. Он будет показывать оставшиеся дни, часы, минуты и секунды, чтобы посетители осознавали срочность и важность Вашего предложения. Обязательно посмотрите креативный дизайн таймера отсчета, в формате psd.
Давайте начнем с разметки!
HTML структура
Мы дадим плагину творческое название “countdown” (“Обратный отсчет”). Для вызова элемента нужно воспользоваться всего лишь небольшим кодом. Вам не нужно ничего делать, кроме того, чтобы выбрать место на своем сайте для таймера.
Вот конструкция кода, которая будет выведена на стороне пользователя:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<div id="countdown" class="countdownHolder"> <span class="countDays"> <span class="position"> <span class="digit static"></span> </span> <span class="position"> <span class="digit static"></span> </span> </span> <span class="countDiv countDiv0"></span> <span class="countHours"> <span class="position"> <span class="digit static"></span> </span> <span class="position"> <span class="digit static"></span> </span> </span> <span class="countDiv countDiv1"></span> <span class="countMinutes"> <span class="position"> <span class="digit static"></span> </span> <span class="position"> <span class="digit static"></span> </span> </span> <span class="countDiv countDiv2"></span> <span class="countSeconds"> <span class="position"> <span class="digit static"></span> </span> <span class="position"> <span class="digit static"></span> </span> </span> <span class="countDiv countDiv3"></span> </div> |
В приведенном выше примере, плагин был вызван с помощью простой и короткой комбинации – div id="countdown" Затем плагин добавляет класс countdownHolder (к которому потом применяются некоторые стили CSS).
Внутри идет разметка для цифр. Есть две цифры внутри тега span c классом digit (дни, часы, минуты и секунды). Максимальная дата для таймера – 99 дней (если Вам необходимо больше, то скорее всего, этот плдагин не подойдет 
).
Класс static придает некоторые стили градиента и тени. Во время анимации, этот класс удаляется, так что эти CSS3 стили не замедляют анимацию. Цифры собраны в группу, чтобы было легко стилизовать их. Добавление размера шрифта для countDays, повлияет на размер цифр “дней”.
Двоеточие между шифрами создано с помощью CountDiv, и псевдо-элементов :after и :before. Но как же создается такая конструкция html кода?
JQuery код
Прежде всего, давайте посмотрим на две вспомогательные функции, используемые в плагине:
- init – генерирует всю html разметку;
- switchDigit -задает
spanи приводит в движение цифры внутри него.
То, что мы имеем такой план, позволяет поддерживать код плагина в чистоте.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
function init(elem, options){ elem.addClass('countdownHolder'); // Creating the markup inside the container $.each(['Days','Hours','Minutes','Seconds'],function(i){ $('<span class="count'+this+'">').html( '<span class="position">\ <span class="digit static">0</span>\ </span>\ <span class="position">\ <span class="digit static">0</span>\ </span>' ).appendTo(elem); if(this!="Seconds"){ elem.append('<span class="countDiv countDiv'+i+'"></span>'); } }); } // Creates an animated transition between the two numbers function switchDigit(position,number){ var digit = position.find('.digit') if(digit.is(':animated')){ return false; } if(position.data('digit') == number){ // We are already showing this number return false; } position.data('digit', number); var replacement = $('<div>',{ 'class':'digit', css:{ top:'-2.1em', opacity:0 }, html:number }); // The .static class is added when the animation // completes. This makes it run smoother. digit .before(replacement) .removeClass('static') .animate({top:'2.5em',opacity:0},'fast',function(){ digit.remove(); }) replacement .delay(100) .animate({top:0,opacity:1},'fast',function(){ replacement.addClass('static'); }); } |
Отлично! Теперь давайте перейдем к главному коду плагина. Наш плагин должен взять объект с параметрами для лучшего конфигурирования – метка времени, которое нужно рассчитывать, и функцию обратного вызова, выполняемого после каждого тика секунды. Для краткости, я опустил другие функции.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
(function($){ // Number of seconds in every time division var days = 24*60*60, hours = 60*60, minutes = 60; // Creating the plugin $.fn.countdown = function(prop){ var options = $.extend({ callback : function(){}, timestamp : 0 },prop); var left, d, h, m, s, positions; // Initialize the plugin init(this, options); positions = this.find('.position'); (function tick(){ // Time left left = Math.floor((options.timestamp - (new Date())) / 1000); if(left < 0){ left = 0; } // Number of days left d = Math.floor(left / days); updateDuo(0, 1, d); left -= d*days; // Number of hours left h = Math.floor(left / hours); updateDuo(2, 3, h); left -= h*hours; // Number of minutes left m = Math.floor(left / minutes); updateDuo(4, 5, m); left -= m*minutes; // Number of seconds left s = left; updateDuo(6, 7, s); // Calling an optional user supplied callback options.callback(d, h, m, s); // Scheduling another call of this function in 1s setTimeout(tick, 1000); })(); // This function updates two digit positions at once function updateDuo(minor,major,value){ switchDigit(positions.eq(minor),Math.floor(value/10)%10); switchDigit(positions.eq(major),value%10); } return this; }; /* The two helper functions go here */ })(jQuery); |
Функция “тика” вызывает саму себя каждую секунду. Внутри него, вычисляем разницу во времени между меткой времени и текущей датой. Функция updateDuo обновляет цифры, состоящие единицу времени.
Плагин готов! Как он работает, видно в демо-примере.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
$(function(){ var note = $('#note'), ts = new Date(2012, 0, 1), newYear = true; if((new Date()) > ts){ // The new year is here! Count towards something else. // Notice the *1000 at the end - time must be in milliseconds ts = (new Date()).getTime() + 10*24*60*60*1000; newYear = false; } $('#countdown').countdown({ timestamp : ts, callback : function(days, hours, minutes, seconds){ var message = ""; message += days + " day" + ( days==1 ? '':'s' ) + ", "; message += hours + " hour" + ( hours==1 ? '':'s' ) + ", "; message += minutes + " minute" + ( minutes==1 ? '':'s' ) + " and "; message += seconds + " second" + ( seconds==1 ? '':'s' ) + " <br />"; if(newYear){ message += "left until the new year!"; } else { message += "left to 10 days from now!"; } note.html(message); } }); }); |
Конечно, чтобы это работало, вам придется включить CSS и JS файлы из папки таймера обратного отсчета для Вашей странице.
Для того, чтобы задать дату, Вам нужно редактировать следующую строку в файле script.js.
|
1 |
ts = new Date(2013, 06, 3), |
В этом примере:
2013– год;06– месяц, задается на один меньше (т.е. февраль – 01, март – 02 и т.д.);3– день.
Готово!
Вы можете использовать этот скрипт как прекрасное дополнение к каждой странице запуска. При желании Вы можете легко видоизменить или доработать дизайн таймера с помощью CSS. Спасибо за внимание! 
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
Ваще отличный сайт!!!