Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru Блог Работаем с jQuery Countdown или как разместить на странице кучу счётчиков со своими значениями времени

Работаем с jQuery Countdown или как разместить на странице кучу счётчиков со своими значениями времени


 ПафНутиЙ    12.03.2013    Блог    11308    16

Работаем с jQuery Countdown или как разместить на странице кучу счётчиков со своими значениями времени


Всем привет!
Пост родился как ответ на вопрос, так что будет краткий, но содержательный.
Архив для самых нетерпеливых [97,68 Kb] (cкачиваний: 925)

Что потребуется?

Для реализации множества таймеров на одной странице без привязки к id блока и прочим элементам нам понадобится следующее:
  1. Собственно скрипт jQuery Countdown
  2. Прямые руки.

Что будем с этим делать?

Самый простой и очевидный способ передачи данных о времени истечения таймера в скрипт - воспользоваться html5-атрибутом data-* им и воспользуемся:
<li data-timer="2013, 5, 18,0,0,0"></li>

Главное чтобы формат даты в атрибуте data-timer должен быть таким:
Год, Месяц, День, Час, Минута, Секунда
В итоге получим вот такую проверочную конструкцию:
<ul class="counters">
    <li title="Этот таймер кончился"  data-timer="2013,2,17,0,0,15"></li>
    <li title="Тут указаны не все цифры" data-timer="2013,3,12"></li>
    <li title="У этого ещё полно времени" data-timer="2015,4,17,0,0,0"></li>
    <li data-timer="2013, 5, 18,0,0,0"></li>
</ul>
Далее подключим к странице необходимые скрипты и библиотеки и напишем небольшой скрипт для обработки данных о счётчиках.
В скрипте всё прокомментировано, так что думаю в пояснениях нет необходимости:
jQuery(document).ready(function($) {

    // для всех элементов, которые имеют атрибут data-timer, выполняем следующее действие
    $("[data-timer]").each(function () {

        // текущий элемент, обернутый в jquery
        var $this = $(this);
        
        // Получаем описание таймера
        var timerDescription = $this.prop('title');
        // Если у элемента есть title - прибавляем к нему двоеточие и пробел
        if (timerDescription != false) {
            timerDescription = timerDescription+': ';
        };

        // получили строку, разбили ее по ","
        var dateArr = $this.data("timer").split(",");

        // элементы массива - строки, а для new Date нужны числа
        dateArr = $.map(dateArr, function (elem) {
            return parseInt(elem);
        });

        // в html пишем "человеческие" месяцы, здесь преобразуем к js-месяцам
        dateArr[1]--;


        // конструируем даты
        var date = new Date(dateArr[0], dateArr[1], dateArr[2], dateArr[3], dateArr[4], dateArr[5]);

        // инициализируем таймер
        $this.countdown({
            // Берём дату из заранее заготовленной
            until: date,

            // Определяем шаблон вывода
            layout:'{desc}<span>{d<}{dn} {dl} и {d>}'+
            '{hn} {hl}, {mn} {ml}, {sn} {sl}</span>',

            // Определяем описание
            description: timerDescription

            // Ну и про язык не забываем
        }, $.countdown.regional['ru']);

    });
});

И что дальше?

Дальше качаем архив с примером: Множественные счётчики на странице [97,68 Kb] (cкачиваний: 925)
Изучаем как оно работает и внедряем себе
Самый простой вариант внедрить это решение в DLE - записывать значения таймеров в дополнительные поля и выводить примено вот так:
<li data-timer="[xfvalue_timer]"></li>


Спасибо за внимание, надеюсь вы почерпнули немного знаний)

Картинка взята с dribbble

Комментарии пользователей (16)

Lynat1k
1

373 | 93

Lynat1k - 12 марта 2013 21:35 - Юзер

а можно как то естроить счетчик вермени если дата в таком формате "4 ноября 2010" ???

ПафНутиЙ
1063

3393 | 2433

ПафНутиЙ - 13 марта 2013 09:55 - Админ

Откройте вкладку layouts на сайте плагина - всё станет понятно)

Каков вопрос - таков и ответ. Просто помните об этом.

Lynat1k
1

373 | 93

Lynat1k - 13 марта 2013 20:58 - Юзер

абсолютно ничего не понял=)

ПафНутиЙ
1063

3393 | 2433

ПафНутиЙ - 13 марта 2013 22:51 - Админ

Отлично! будет меньше вопросов)))
На самом деле проще настроить вывод даты в нужном для счётчика вормате, чем говнокодить превращая русские месяца в удобоваримый для счётчика формат.

Каков вопрос - таков и ответ. Просто помните об этом.

Lynat1k
1

373 | 93

Lynat1k - 14 марта 2013 10:28 - Юзер

и все таки можно сделать как то с русскими месяцами?

Sander
1125

1636 | 1202

Sander - 13 марта 2013 02:51 - Эксперт

Хренасе у них код огромный...
Я как-то делал, у меня получился в разы меньший... Хотя делал немного отлично от предложенного ибо new Date выдает пользователю дату не сервера, а в соответствии с его временной зоной.

SanDev.pro - мой блог.

ICQ: 404-037-556
Skype: Sander8804

bot
1

23 | 9

bot - 13 марта 2013 09:51 - ГипноКотЭ

min версия не такая уж и большая)

Riger
1

19 | 10

Riger - 17 июля 2013 19:18 - Юзер

ПафНутиЙ, спасибо за полезную информацию.
Возник вопрос (если не сложно конечно), можно ли как то передавать в счетчик значение даты окончания размещения стать?
Т.е. при публикации новости выставляется дата окончания публикации и автоматом эта дата втавляется в счетчик (хотелось бы чтобы авторы знали когда закончится срок размещения их статьи).

DatiX
2

174 | 112

DatiX - 30 сентября 2013 14:07 - Юзер

а как сделать вывод даты в формате 00:06:53 а не так как сейчас 0:6:53?

xeon01
8

30 | 3

xeon01 - 8 декабря 2013 09:43 - Юзер

Как можно отключить, вообще убрать секунды?

ПафНутиЙ
1063

3393 | 2433

ПафНутиЙ - 8 декабря 2013 10:31 - Админ

На сайте автора скрипта есть куча примеров и удобная документация.

Каков вопрос - таков и ответ. Просто помните об этом.

Shurka
1

Shurka - 6 апреля 2014 19:43 - Юзер

Я извиняюсь, а как сделать чтобы был онлайн отсчет? Чтобы без обновлений онлайн обновлялся счетчик

aregator
12 | 1

aregator - 27 сентября 2014 04:19 - Юзер

Кто нето разобрался как сделать вида : 03:00:40 смотрел читал так и не понял
все равно выходит так : 3:0:45

Paulike
8 | 2

Paulike - 4 октября 2014 15:55 - Юзер

Тоже интересно решение с нулями при выводе 01:01:09

Есть у кого предложения ???
Нашел на сайте until: liftoffTime, padZeroes: true
Но так и не разобрался куда ставить

Помогите плз

Paulike
8 | 2

Paulike - 4 октября 2014 19:36 - Юзер

Если кому пригодиться - то делаеться в выводе шаблона

// Определяем шаблон вывода
                     layout:'{desc}<span>'+ 
                     '{hnn}:{mnn}:{snn}</span>',

EbasH
4

EbasH - 15 сентября 2015 16:46 - Юзер

На сайте не работает вывод времени, к примеру ставишь таймер 2015,9,30,11,11,11 и вот отсчет до этх 11,11,11(время) не производиться, хотя на локалке все нормально

Чтобы комментировать - войдите или зарегистрируйтесь на сайте