Информация к новости
  • Просмотров: 417
  • Автор: sulicompany
  • Дата: 13-12-2012, 20:43
 (голосов: 0)
13-12-2012, 20:43

Таймер на jQuery

Категория: Программирование » jQuery


Таймеров обратного отсчета существует достаточно много. Но иногда требуется определить, сколько времени прошло с момента события.мы строили таймер обратного отсчета в виде плагина для jQuery. Модифицируем его для прямого подсчета прошедших мгновений.

Шаг 1. Изменяем название варианта

Сначала возьмем копию уже. Изменяем имя папки assets/countdownнаassets/countup. Также изменяем путь в файлеindex.html, который указывает на данный файл.

Таймер

Шаг 2. Модифицируем код

Небольшие изменения в коде плагина изменят направления его счета. Открываемassets/countup/jquery.contup.jsи редактируем код:

01 // Создаем плагин
02 $.fn.countup = function(prop){
03     
04     varoptions = $.extend({
05         callback    : function(){},
06         start       : newDate()
07     },prop);
08     
09     varpassed = 0, d, h, m, s,
10         positions;
11
12     // Инициализация плагина
13     init(this, options);
14     
15     positions = this.find('.position');
16     
17     (functiontick(){
18         
19         passed = Math.floor((newDate() - options.start) / 1000);
20         
21         // Прошло дней
22         d = Math.floor(passed / days);
23         updateDuo(0, 1, d);
24         passed -= d*days;
25         
26         // Прошло часов
27         h = Math.floor(passed / hours);
28         updateDuo(2, 3, h);
29         passed -= h*hours;
30         
31         // Прошло минут
32         m = Math.floor(passed / minutes);
33         updateDuo(4, 5, m);
34         passed -= m*minutes;
35         
36         // Прошло секунд
37         s = passed;
38         updateDuo(6, 7, s);
39         
40         // Вызываем возвратную функцию пользователя
41         options.callback(d, h, m, s);
42         
43         // Планируем следующий вызов функции через 1 секунду
44         setTimeout(tick, 1000);
45     })();
46     
47     // Данная функция обновляет две позиции за один проход
48     functionupdateDuo(minor,major,value){
49         switchDigit(positions.eq(minor),Math.floor(value/10)%10);
50         switchDigit(positions.eq(major),value%10);
51     }
52     
53     returnthis;
54 };

Вызов плагина осуществляется просто (данный код помещаем в файлscript.js):

1 $('#countdown').countup();

Также можно осуществлять отсчет от указанной даты и времени:

1 $('#countdown').countup({
2     start: newDate(2012, 10, 27, 15, 58, 21) //year, month, day, hour, min, sec
3 });