Как разместить на странице кучу счётчиков со своими значениями времени

Работаем с jQuery Countdown или как разместить на странице кучу счётчиков со своими значениями времени.
Простой способ реализации множественных таймеров на странице на основе jQuery Countdown и html5.

Что потребуется?
Для реализации множества таймеров на одной странице без привязки к 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']);
     
        });
    });

И что дальше?
Дальше качаем архив с примером.

Изучаем как оно работает и внедряем себе
Самый простой вариант внедрить это решение в DLE - записывать значения таймеров в дополнительные поля и выводить примерно вот так:

<li data-timer="[xfvalue_timer]"></li>

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

Автор: ПафНутий
Источник: dle-faq