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

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


 ПафНутиЙ    12.03.2013    Блог    13101    16 комментариев

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


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

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

Для реализации множества таймеров на одной странице без привязки к 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качиваний: 1061)
Изучаем как оно работает и внедряем себе
Самый простой вариант внедрить это решение в DLE - записывать значения таймеров в дополнительные поля и выводить примено вот так:
<li data-timer="[xfvalue_timer]"></li>


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

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

16 комментариев

Lynat1k
Юзер

Lynat1k - 12 марта 2013 21:35 -

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

ПафНутиЙ
Админ

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

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

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

Lynat1k
Юзер

Lynat1k - 13 марта 2013 20:58 -

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

ПафНутиЙ
Админ

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

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

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

Lynat1k
Юзер

Lynat1k - 14 марта 2013 10:28 -

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

Sander
Эксперт

Sander - 13 марта 2013 02:51 -

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

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

ICQ: 404-037-556
Skype: Sander8804

bot
ГипноКотЭ

bot - 13 марта 2013 09:51 -

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

Riger
Юзер

Riger - 17 июля 2013 19:18 -

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

DatiX
Юзер

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

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

xeon01
Юзер

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

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

ПафНутиЙ
Админ

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

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

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

Shurka
Юзер

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

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

aregator
Юзер

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

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

Paulike
Юзер

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

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

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

Помогите плз

Paulike
Юзер

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

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

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

EbasH
Юзер

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

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

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