/** * @name jQuery Countdown Plugin * @author Martin Angelov * @version 1.0 * @url http://tutorialzine.com/2011/12/countdown-jquery/ * @license MIT License */ (function($){ // Количество секунд в каждом временном отрезке var days = 24*60*60, hours = 60*60, minutes = 60; // Создаем плагин $.fn.countdown = function(prop){ var options = $.extend({ callback : function(){}, timestamp : 0 },prop); var left, d, h, m, s, positions; // инициализируем плагин init(this, options); positions = this.find('.position'); (function tick(){ // Осталось времени left = Math.floor((options.timestamp - (new Date())) / 1000); if(left < 0){ left = 0; } // Осталось дней d = Math.floor(left / days); updateDuo(0, 1, d); left -= d*days; // Осталось часов h = Math.floor(left / hours); updateDuo(2, 3, h); left -= h*hours; // Осталось минут m = Math.floor(left / minutes); updateDuo(4, 5, m); left -= m*minutes; // Осталось секунд s = left; updateDuo(6, 7, s); // Вызываем возвратную функцию пользователя options.callback(d, h, m, s); // Планируем следующий вызов данной функции через 1 секунду setTimeout(tick, 1000); })(); // Данная функция обновляет две цифоровые позиции за один раз function updateDuo(minor,major,value){ switchDigit(positions.eq(minor),Math.floor(value/10)%10); switchDigit(positions.eq(major),value%10); } return this; }; function init(elem, options){ elem.addClass('countdownHolder'); // Создаем разметку внутри контейнера $.each(['Days','Hours','Minutes'],function(i){ $('').html( '\ 0\ \ \ 0\ ' ).appendTo(elem); if(this!="Seconds"){ elem.append(''); } }); } // Создаем анимированный переход между двумя цифрами function switchDigit(position,number){ var digit = position.find('.digit') if(digit.is(':animated')){ return false; } if(position.data('digit') == number){ // Мы уже вывели данную цифру return false; } position.data('digit', number); var replacement = $('',{ 'class':'digit', css:{ top:'-2.1em', opacity:0 }, html:number }); // Класс .static добавляется, когда завершается анимация. // Выполнение идет более плавно. digit .before(replacement) .removeClass('static') .animate({top:'2.5em',opacity:0},'fast',function(){ digit.remove(); }) replacement .delay(100) .animate({top:0,opacity:1},'fast',function(){ replacement.addClass('static'); }); } })(jQuery); /* playback timings (ms): LoadShardBlock: 567.822 (3) esindex: 0.014 captures_list: 599.9 CDXLines.iter: 20.315 (3) PetaboxLoader3.datanode: 603.729 (5) exclusion.robots: 0.461 exclusion.robots.policy: 0.439 RedisCDXSource: 6.762 PetaboxLoader3.resolve: 216.299 (2) load_resource: 387.794 */