Плагин обратного отсчета на jQuery

Вторник, декабря 13, 2011 15:48

jquerytimerНа днях столкнулся с необходимостью реализовать обратный отсчет на сайте. Суть заключалась в том что писал модуль опросов под DLE, на некоторые опросы время ограничивается и как следствие нужен таймер, но с возможностью выполнения нужных функций по окончанию времени. Изобретать велосипед не хотелось, да и времени особо не было, по этому пошел к большому брату и на просторах буржунета нашел подходящий плагин.Нашелся плагин вот тут http://davidwalsh.name/jquery-countdown-plugin но там все не по русски, а плагин jQuery мне понравился, так что я решил не много о нем написать. Все очень лаконично, просто и доступно даже для начинающего кодера, что в принципе не может не радовать.

Собственно говоря код плагина представлен ниже:

jQuery.fn.countDown = function(settings,to) {
 settings = jQuery.extend({
 startFontSize: '36px',
 endFontSize: '12px',
 duration: 1000,
 startNumber: 10,
 endNumber: 0,
 callBack: function() { }
 }, settings);
 return this.each(function() {

 //where do we start?
 if(!to && to != settings.endNumber) { to = settings.startNumber; }

 //set the countdown to the starting number
 $(this).text(to).css('fontSize',settings.startFontSize);

 //loopage
 $(this).animate({
 'fontSize': settings.endFontSize
 },settings.duration,'',function() {
 if(to > settings.endNumber + 1) {
 $(this).css('fontSize',settings.startFontSize).text(to - 1).countDown(settings,to - 1);
 }
 else
 {
 settings.callBack(this);
 }
 });

 });
};

Ну а вызвать его можно вот так:

$('#countdown').countDown({
 startNumber: 10,
 callBack: function(me) {
 $(me).text('Время вышло!').css('color','#090');
 }
 });

Просмотреть плагин в действии можно тут:

Демо

Ну и скачать

  Плагин обратного отсчета на jQuery (2,1 KiB, 433 hits)

Метки:

Оставить комментарий или два