Таймер JQuery обратного отсчета времени + дизайн! | Vladmaxi.net
ГлавнаяВеб-разработчикуJQueryТаймер JQuery обратного отсчета времени + дизайн!
Дата: 19.06.2013 в 23:34 | Просмотров: 7288

Таймер JQuery обратного отсчета времени + дизайн!

таймер jquery, jquery таймер обратного отсчета
Скачатьбесплатно с сервера
Демодемонстрация

При создании нового сайта или запуске нового проекта, может возникнуть потребность в расчете оставшегося времени. JQuery таймер обратного отсчета + в сочетании с полем для ввода E-mail адреса, может принести хороший результат для Вашего проекта или даже регистрации и продажи.

Сегодня мы собираемся создать аккуратный таймер JQuery плагин для отображения таймера обратного отсчета. Он будет показывать оставшиеся дни, часы, минуты и секунды, чтобы посетители осознавали срочность и важность Вашего предложения. Обязательно посмотрите креативный дизайн таймера отсчета, в формате psd.

Давайте начнем с разметки!

HTML структура

Мы дадим плагину творческое название “countdown” (“Обратный отсчет”). Для вызова элемента нужно воспользоваться всего лишь небольшим кодом. Вам не нужно ничего делать, кроме того, чтобы выбрать место на своем сайте для таймера.

Вот конструкция кода, которая будет выведена на стороне пользователя:

В приведенном выше примере, плагин был вызван с помощью простой и короткой комбинации – div id="countdown" Затем плагин добавляет класс countdownHolder (к которому потом применяются некоторые стили CSS).

Внутри идет разметка для цифр. Есть две цифры внутри тега span c классом digit (дни, часы, минуты и секунды). Максимальная дата для таймера – 99 дней (если Вам необходимо больше, то скорее всего, этот плдагин не подойдет :( ).

Класс static придает некоторые стили градиента и тени. Во время анимации, этот класс удаляется, так что эти CSS3 стили не замедляют анимацию. Цифры собраны в группу, чтобы было легко стилизовать их. Добавление размера шрифта для countDays, повлияет на размер цифр “дней”.

Двоеточие между шифрами создано с помощью CountDiv, и псевдо-элементов :after и :before. Но как же создается такая конструкция html кода?

JQuery код

Прежде всего, давайте посмотрим на две вспомогательные функции, используемые в плагине:

  • init – генерирует всю html разметку;
  • switchDigit -задает span и приводит в движение цифры внутри него.

То, что мы имеем такой план, позволяет поддерживать код плагина в чистоте.

Отлично! Теперь давайте перейдем к главному коду плагина. Наш плагин должен взять объект с параметрами для лучшего конфигурирования – метка времени, которое нужно рассчитывать, и функцию обратного вызова, выполняемого после каждого тика секунды. Для краткости, я опустил другие функции.

Функция “тика” вызывает саму себя каждую секунду. Внутри него, вычисляем разницу во времени между меткой времени и текущей датой. Функция updateDuo обновляет цифры, состоящие единицу времени.

Плагин готов! Как он работает, видно в демо-примере.

Конечно, чтобы это работало, вам придется включить CSS и JS файлы из папки таймера обратного отсчета для Вашей странице.

Для того, чтобы задать дату, Вам нужно редактировать следующую строку в файле script.js.

В этом примере:

  • 2013 – год;
  • 06 – месяц, задается на один меньше (т.е. февраль – 01, март – 02 и т.д.);
  • 3 – день.

Готово!

Вы можете использовать этот скрипт как прекрасное дополнение к каждой странице запуска. При желании Вы можете легко видоизменить или доработать дизайн таймера с помощью CSS. Спасибо за внимание! :)


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tutorialzine.com
Перевел: Владислав Бондаренко


ВСЕ КОММЕНТАРИИ

    1. Ваще отличный сайт!!!

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