25 ноября 2013
6728
отсчет времени, jquery

Отсчет времени jQuery

JQuery
Демонстрация » Скачать »

Здравствуйте! Данный урок я решил посвятить созданию jQuery плагина реализующего отсчет времени до указанной даты. Наш плагин будет принимать всего один параметр – дату, до которой будет вестись отсчет. Дата должна соответствовать формату «31 Dec 2013 23:59» как указано в примере подключения плагина:

 

$("#countdown").countdown({
         date: "16 Feb 2018 12:00"
});

 

Сам плагин будет состоять всего из одной функции, работа которой заключается в подсчете временной разницы между текущей датой и датой указанной при подключении плагина. Текущая и указанная даты переводятся в секунды, прошедшие с 1 января 1970 при помощи js функции Date.parse (эквивалент функции time() в  PHP).

Содержимое этой функции отображено ниже.

 

 

// Перевод в секунды                     
eventDate = Date.parse(options.date) / 1000;
currentDate = Math.floor($.now() / 1000);

// если указанная дата уже прошла,
// то завершаем работу функции до вызова рекурсии                         
if(eventDate < currentDate){
return false;
}

// рекурсивный запуск функции каждую секунду
setTimeout( make, 1000);

// количество секунд оставшихся до указанной даты                          
seconds = eventDate - currentDate;
 
// вычисление дней, часов, минут и секунд           
days = Math.floor(seconds / (60 * 60 * 24));
seconds -= days * 60 * 60 * 24;

hours = Math.floor(seconds / (60 * 60));
seconds -= hours * 60 * 60;

minutes = Math.floor(seconds / 60);
seconds -= minutes * 60;

// обновление отображаемых на экране данных
element.find(".days").text(days);
element.find(".hours").text(hours);
element.find(".minutes").text(minutes);
element.find(".seconds").text(seconds);

 

Помимо этой функции в плагине есть также строка

 

var element = $(this);

 

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

 

Урок по теме отсчет времени JQuery на этом окончен, благодарю за проявленное Вами внимание!