Искал простенький плагин для обратного отсчета. Перерыл много всего навороченного и супернавороченного. Ничего простенького не нашел ((( Итог — написал сам.
Итак, код плагина с комментариями:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
(function($){ // Секунд в сутках var days = 24*60*60; // Секунд в часе var hours = 60*60; // Секунд в минуте var minutes = 60; // Инициализируем плагин $.fn.countdown = function(prop){ var options = $.extend({ // Callback метод callback:function(){}, // Метод по завершению таймера finished:function(){}, // Секунд до конца отсчета seconds:0 },prop); var left = 0; // Каждую секунду делаем вот это (function tick(sec){ // Текущее значение количество секунд до завершения sec = (!sec && sec!==0) ? options.seconds : sec; // Начинаем считать left = sec; if(left<=0) { // Если 0 - завершаем отсчет options.finished(); } else { // Количество дней d = Math.floor(left/days); left -= d*days; // Количество часов h = Math.floor(left/hours); left -= h*hours; // Количество минут m = Math.floor(left/minutes); left -= m*minutes; // Количество секунд s = left; // Вызываем Callback options.callback(d,h,m,s,sec); } // Перезапускаем через секунду setTimeout(function(){ tick(sec-1); },1000); })(); return this; }; })(jQuery); |
Как всем этим пользоваться
Добавляем на страницу элемент, где будем показывать таймер (зададим время 1 час):
|
1 |
<span class="countdown" data-seconds="3600"></span> |
Инициализируем счетчик
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$(function(){ $(".countdown").each(function(index){ var counter = $(this); counter.countdown({ seconds:counter.data("seconds"), callback:function(days,hours,minutes,seconds,total){ days = (days) ? days+":" : ""; hours = (hours) ? ((hours<10)?"0"+hours:hours)+":" : "00:"; minutes = (minutes) ? ((minutes<10)?"0"+minutes:minutes)+":" : "00:"; seconds = (seconds) ? ((seconds<10)?"0"+seconds:seconds) : "00"; counter.html(days+hours+minutes+seconds); }, finished:function(){ alert("Таймер оттаймерил!"); } }); }); }); |
Сам плагин: jquery.countdown.js