Здравствуйте! Данный урок я решил посвятить созданию 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 на этом окончен, благодарю за проявленное Вами внимание!