Пишем свой jQuery-плагин таймера обратного отсчета для Bootstrap

Иллюстрация

Плагин будет максимально простой – без каких-либо параметров и прочего (каждый при необходимости сможет расширить или модифицировать его под себя).

Для реализации плагина надо решить следующие задачи:

  • Сверстать будущий таймер
  • Разработать логику работы таймера
  • Оформить все в виде jQuery-плагина

Верстка

Предположим что будущий таймер будет помещен в некий контейнер и расположится во всю его ширину. Базовым элементом будет div с классом countdown-timer:

<div class="countdown-timer"></div>

При инициализации плагина внутренности этого контейнера будем заменять на верстку таймера:

<div class="countdown-timer">
    <div class="row bs-countdown-timer">
        <div class="col-xs-3">
            <div class="numcard">
                <span class="numcard-number days">00</span>
                <span class="numcard-desc">Дней</span>
            </div>
        </div>
        // ...
        // аналогично для часов, минут и секунд
        // ...
    </div>
</div>

Структура простая – четыре колонки с днями, часами, минутами и секундами, в каждой внутри некая карточка с цифрами и подписью. Сами карточки логичнее реализовать фиксированного размера, а вот интервалы между ними будут «адаптивными».

Следующие каскадные стили реализуют необходимое оформление таймера:

// визуально отделяем таймер от остального контента
.bs-countdown-timer {
    border: 1px solid rgba(0,0,0,0.1);
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 10px;
}
.bs-countdown-timer .col-xs-3 {
    text-align: center;
}
// выводим двоеточия между блоками
.bs-countdown-timer .col-xs-3:after {
    content: ':';
    font-size: 48px;
    color: rgba(0,0,0,0.4);
    position: absolute;
    right: -6px;
    top: 0;
}
// последнему блоку двоеточие не нужно...
.bs-countdown-timer .col-xs-3:last-child::after {
    content: '';
    display: none;
}
// оформляем карточки с цифрами
.bs-countdown-timer .numcard {
    border: none;
    border-radius: 8px;
    width: 80px;
    height: 80px;
    margin: 0 auto;
    background: rgba(0,0,0,.05);
    padding-top: 10px;
}
.bs-countdown-timer .numcard-number {
    font-size: 36px;
    line-height: 42px;
    display: block;
}
.bs-countdown-timer .numcard-desc {
    font-size: 12px;
    padding: 0;
    display: block;
    color: rgba(0,0,0,.5);
}

Логика

Для реализации таймера достаточно раз в одну секунду пересчитывать оставшееся до некоторого момента время и разбивать его на дни, часы, минуты и секунды. Сам расчет произведем следующим образом:

var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
min = parseInt(seconds_left / 60);
sec = parseInt(seconds_left % 60);

hours = hours<10?'0'+hours:hours;
min = min<10?'0'+min:min;
sec = sec<10?'0'+sec:sec;

Дату необходимо передавать в виде строки совместимой с JavaScript-объектом Date (к сожалению, традиционный для нас формат дд.мм.гггг не поддерживается):

target_date = new Date('2015-11-01').getTime(); //пример​

Оформляем jQuery-плагин

Пишем базовую структуру:

$.fn.bs_countdown_timer = function(){
    return this.each(function() {
        var counter = $(this);
        var counter_days = counter.find('.days');
        var counter_hours = counter.find('.hours');
        var counter_mins = counter.find('.mins');
        var counter_secs = counter.find('.secs');
        var target_date =new Date(counter.attr('data-date')).getTime();

        ...
    });
}

Дату момента цели отсчета таймера удобно оформить атрибутом data-date базового контейнера:


<div class="countdown-timer" data-date="2016-01-01"></div>

Собственно таймер готов. Должно получиться что-то типа этого:

Исходники можно взять здесь: jquery-bootstrap-countdown-timer.zip