Меню

Jquery countdown plugin настройка



Jquery countdown plugin настройка

Download the files and add a script to your html:

Requirements

The latest versions supports jQuery from 1.7 up to >= 2.1. For legacy support ( event.type property, if you prefer an event orieted programming style, this plugin also support the default jQuery on method to register your callbacks.

To start the countdown the only requirement is the finalDate , but you still need register a callback to manipulate/update the DOM.

Arguments

finalDate

The target date that you are seeking to countdown. This argument can be one of the following:

  • A native date object
  • The milliseconds from Epoch time
  • String formatted as following:
    • YYYY/MM/DD
    • MM/DD/YYYY
    • YYYY/MM/DD hh:mm:ss
    • MM/DD/YYYY hh:mm:ss

callback

A function that will handle the event triggered, despite the fact we have three event types, all of them will have the same object properties (as described bellow), where you can access the offset calculation.

Configuration object

The plugin accepts some configuration passing by an object has the function second argument. This way one can control the precision the plugin will have and allow customizations:

The configuration mode is only available with the new style of initialization.

Elapse mode

The elapse mode allows the plugin to continue counting even after reaches its finish. One can control the render within the callback using the event.elapsed property.

Be aware that no finish event will be dispatched at this mode!

Deferred initialization

The deferred initialization mode allows you to register the callback before the countdown actually starts, this is useful when one wants to render the proper HTML the exact time the countdown starts, (i.e. when the countdown are really short time start method manually to begin the countdown:

Events

This plugin will trigger an event whenever some state change like:

  • Update: Triggered to update the DOM
  • Finish: Triggered when finished
  • Stop: Triggered that paused

To register a callback use the following event.type :

  • update.countdown
  • finish.countdown
  • stop.countdown

Be aware that ALL events should be registered with the namespace *.countdown .

Event object

Most of the time you will be using the event.strftime function to render the countdown, the next section goes deeper in this subject. But you can access all raw values:

Formatter (event.strftime)

A simple formatter that helps keep your code more semantic and avoid repetitive tasks.

It formats the offset date according to the directives in the given format string. The directive consists of a percent ( % ) character. Any text not listed as a directive will be passed through to the output string.

All the directives contains zero-padded (01, 02, 03, …, 10) and blank-padded (1, 2, 3, …, 10) versions, to use the latter please use the dash — modifier.

The formatter is also capable of handle pluralization through the bang ! modifier, by default always return the s character, if you need a complex logic please read the Pluralization topic of this section.

Modifier Description
Blank padding
! Pluralization plugin

Directives

Directive Blank-padded Description
%Y %-Y Years left *
%m %-m Months left *
%n %-n Days left until the next complete month *
%w %-w Weeks left
%W %-W Weeks left until the next complete month *
%d %-d Days left (taking away weeks)
%H %-H Hours left
%M %-M Minutes left
%S %-S Seconds left

* Due to their non linear constrains the calculation does not have precision and it’s pretending to be used as a approximation or not use at all.

There are another set of directives that returns the full count of the time component till the end of the countdown:

Directive Blank-padded Description
%D %-D Total count of days till the end
%I %-I Total count of hours thill the end
%N %-N Total count of minutes till the end
%T %-T Total count of seconds till the end

Pluralization

The support for pluralization is built in the formatter by adding the ! (bang) modifier to the directive, the default behavior is to return the s character, it’s also possible to customize the return using the suffix . ; .

The table bellow show the supported use cases of the pluralization plugin.

Directive Description
%!H Return s when the hour is different than 1
%!S:plural; Return plural when seconds if different than 1
%!d:singular,plural; Return singular when day is 1 and plural otherwise

Controls

The methods pause / resume allows to control the execution flow of the countdown:

There also the aliases stop / start for the same functionality:

To set a new final date for the countdown, call the plugin initialization function with a valid date string:

Источник

jQuery таймер: создаем таймер обратного отсчета на jquery

Какова цель таймера, для сайта? Когда мы ожидаем, какого то события, мы пытаемся найти способ показать пользователям, сколько времени осталось. Таймер дает чувство важности события, и если его связать с email полем ввода, то вы получите намного больше подписчиков на ваши новости.

Что мы ожидаем от jQuery таймера? Сегодня мы будем создавать jQuery плагин для отображения обратного отсчета времени. Он будет показывать оставшиеся дни, часы, минуты и секунды до начала события. Что же, начнем…

Вы можете скачать пример работы одним архивом: countdown_demo.rar

Все что необходимо для работы таймера это указать, какой div будет нашим таймером. Мы просто установим id блока countdown, а jQuery плагин таймера позаботиться о следующей HTML разметке.

В этом примере кода, jquery плагин будет вызываться и работать с div, у которого id – countdown. К этому элементу добавлен класс countdownHolder(он будет автоматически добавлятся, содержит некоторые элементы дизайна с помощью CSS).

Внутри, находится разметка для цифр таймера. Предусмотрены два span элемента для цифр на дни, часы, минуты и секунды. Это означает, что вы можете вести отсчет времени к той дате, которая не дальше 99 дней в будущем. Постоянно использовать таймер не получится. Это не целесообразно и менее впечатлительно.

Создадим файл с классами стилей для таймера.

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

Элементы span с классом .countDiv – это разделители между блоками цифр. Эта структура сформирована с помощью :before/:after атрибутов.

Как же формируется эта разметка?

jQuery

Для начала, создадим две вспомогательные функции используемые плагином:

init – формирует разметку, которую вы только что видели.

switchDigit – получает .positionspan и анимирует цифры в нем.

Отделение этих функций от кода плагина, позволяет держать код плагина в чистоте.

jquery.countdown.js – вспомогательные функции

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

jquery.countdown.js

Функция tick, вызывает себя каждую секунду. Таким образом, мы можем считать разницу во времени. Функция updateDuo обновляет цифры.

jQuery таймер готов! – посмотрим, как его можно использовать в коде.

Использование jQuery таймера

Просто вставьте следующие строки кода в вашем файле с JavaScript.

script.js

Конечно же, нужно подключить CSS и JS файлы таймера к вашей странице.

Цикличность

Для того, чтобы сделать таймер цикличным, например посчитать оставшееся время до следующего дня, достаточно изменить несколько строк в коде. Файл scripts.php будет выглядеть так:

Что еще?

Вы можете использовать скрипт, как отличное дополнение на каждой странице перед важным событием. Лучшее в jquery таймере то, что он не использует изображений, все работает на чистом CSS коде.

Источник

Таймер обратного отсчета времени.

Сегодня поговорим о таймерах для сайтов. К примеру, вам нужно сделать обратный отсчет времени до окончания акции или до события на вашем лэндинге или в интернет магазине. Само собой разумеется, такую штуку возможно реализовать только через JavaScript. Изобретать велосипед не стал, вместо этого нашел подходящий jQuery плагин, с моей точки зрения наиболее добротно реализованный — jQuery Countdown Там же подробная документация на английском языке.

В этой заметке речь пойдет о кастомном циферблате и о примере использования плагина. Мне нужен был большой яркий циферблат, решил сделать по стилю напоминающий часы в метро посмотреть демо К сожалению, положить прямо тут рабочий счетчик не получилось из-за дизайна — он вылезает за рамки блока контента. Увы.

Помимо прочего, хотелось текущее время для таймера получать с сервера, где настроен сервис точного времени (ntp). Мало ли, у пользователя часы установлены неверно, всякое бывает. Итак, о плагине рассказал, про циферблат тоже. Интересно, что в плагине предусмотрена локализация на различные языки мира и учитываются числительные (1 минута, 10 минут, 53 минуты). Кстати они, то есть подписи к секциям, изменяются вместе с цифрами «онлайн».

Ниже приведен пример использования, в конце заметки можно скачать демонстрационный архив. Особо заинтересованным могу выслать разбитый по слоям PSD файл, чтобы можно было легко поменять цвет цифр, тени, фон, — словом, подстроить под ваш дизайн страницы.

Цифры даже можно сделать на прозрачном холсте, а внешним видом рулить через CSS, собственно, в приведенном примере почти так и сделано, «корпус» таймера и тень от него, выполнены исключительно стилями. Подложка спрайта, извините, черная, на светлом фоне смотреться все равно не будет, так что спрашивайте psd.

Источник

Таймер обратного отсчета на jQuery

При создании информационной страницы для какого-либо события очень полезным элементом будет дисплей с обратным отсчетом времени. Счетчик подстегивает посетителя визуализацией утекающий сквозь пальцы секунд, что в сочетании с полем для введения адреса email может существенно увеличить базу подписчиков.

В данном уроке мы построим плагин jQuery для вывода таймера обратного отсчета. Он будет выводить количество оставшихся дней, часов, минут и секунд до определенного момента. Анимированное обновление счетчика совершается каждую секунду.

Плагин имеет имя “countdown” (в переводе на русский язык — «обратный отсчет»). Вызванный для пустого элемента, плагин будет заполнять его кодом HTML, необходимым для формирования дисплея таймера. Больше не надо ничего делать, только выбрать нужный элемент, в котором будет отображаться время.

Генерируемая разметка

В выше приведённом примере плагин вызван для элемента div с идентификатором countdown. Плагин добавляет ему класс countdownHolder (поэтому несколько стилей применяются к элементу с помощью кода CSS).

Рассмотрим разметку для цифр. Существует два элемента span с классом digit для каждой единицы времени (дни, часы, минуты и секунды), что налагает ограничения по обратному отсчету количества дней (не более 99).

Статический класс определяет для цифр градиентный фон и тени. При анимации данный класс удаляется, и CSS3 работает без замедления. Цифры объединены в группы, поэтому легко изменить стили для них. Например, добавление свойства font-size к классу .countDays будет влиять на обе цифры дня.

Элемент span .countDiv является разделителем между единицами времени. Двоеточие формируется с помощью псевдо элементов :before/:after .

А как генерируется разметка?

jQuery

Сначала сделаем вспомогательные функции, которые используются в плагине:

  • init — генерирует разметку, которая приведена выше;
  • switchDigit — получает элемент span . position и анимирует цифры внутри него.

Выделим данный функционал отдельно, чтобы можно было рассматривать код плагина без помех.

assets/countdown/jquery.countdown.js

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

assets/countdown/jquery.countdown.js

Функция tick вызывает саму себя (рекурсия) каждую секунду. В ней мы вычисляем время между заданной точкой и текущим значением. Функция updateDuo затем обновляет цифры в соответствии с полученными данными.

Плагин готов! Теперь рассмотрим пример его использования (демонстрационная страница):

assets/js/script.js

Конечно, чтобы демонстрация заработала, нужно подключить файлы CSS и JavaScript из папки плагина к странице.

Заключение

Плагин можно использовать на страницах с информацией о каком-либо событии. Основными его преимуществом является полная реализация на CSS без изображений. Увеличение или уменьшение размера шрифта позволяет выделить нужные единицы времени. А для отключения ненужных единиц надо использовать свойство display:none в соответствующем классе.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: tutorialzine.com/2011/12/countdown-jquery/
Перевел: Сергей Фастунов
Урок создан: 12 Января 2012
Просмотров: 147109
Правила перепечатки

5 последних уроков рубрики «jQuery»

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

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

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

Источник

Читайте также:  Afterburner сбрасывает настройки в майнинге
Adblock
detector