jQuery таймер: создаем таймер обратного отсчета на jquery

Какова цель таймера, для сайта? Когда мы ожидаем, какого то события, мы пытаемся найти способ показать пользователям, сколько времени осталось. Таймер дает чувство важности события, и если его связать с email полем ввода, то вы получите намного больше подписчиков на ваши новости.

Что мы ожидаем от jQuery таймера? Сегодня мы будем создавать jQuery плагин для отображения обратного отсчета времени. Он будет показывать оставшиеся дни, часы, минуты и секунды до начала события. Что же, начнем…

Вы можете скачать пример работы одним архивом: countdown_demo.rar

HTML

Все что необходимо для работы таймера это указать, какой div будет нашим таймером. Мы просто установим id блока countdown, а jQuery плагин таймера позаботиться о следующей HTML разметке.

<div id="countdown" class="countdownHolder">
        <span class="countDays">
                <span class="position">
                        <span class="digit static"></span>
                </span>
                <span class="position">
                        <span class="digit static"></span>
                </span>
        </span>

        <span class="countDiv countDiv0"></span>

        <span class="countHours">
                <span class="position">
                        <span class="digit static"></span>
                </span>
                <span class="position">
                        <span class="digit static"></span>
                </span>
        </span>

        <span class="countDiv countDiv1"></span>

        <span class="countMinutes">
                <span class="position">
                        <span class="digit static"></span>
                </span>
                <span class="position">
                        <span class="digit static"></span>
                </span>
        </span>

        <span class="countDiv countDiv2"></span>

        <span class="countSeconds">
                <span class="position">
                        <span class="digit static"></span>
                </span>
                <span class="position">
                        <span class="digit static"></span>
                </span>
        </span>

        <span class="countDiv countDiv3"></span>
</div>

В этом примере кода, jquery плагин будет вызываться и работать с div, у которого id – countdown. К этому элементу добавлен класс countdownHolder(он будет автоматически добавлятся, содержит некоторые элементы дизайна с помощью CSS).

Внутри, находится разметка для цифр таймера. Предусмотрены два span элемента для цифр на дни, часы, минуты и секунды. Это означает, что вы можете вести отсчет времени к той дате, которая не дальше 99 дней в будущем. Постоянно использовать таймер не получится. Это не целесообразно и менее впечатлительно.

CSS

Создадим файл с классами стилей для таймера.

.countdownHolder{
        width:450px;
        margin:0 auto;
        font: 40px/1.5 'Open Sans Condensed',sans-serif;
        text-align:center;
        letter-spacing:-3px;
}

.position{
        display: inline-block;
        height: 1.6em;
        overflow: hidden;
        position: relative;
        width: 1.05em;
}

.digit{
        position:absolute;
        display:block;
        width:1em;
        background-color:#444;
        border-radius:0.2em;
        text-align:center;
        color:#fff;
        letter-spacing:-1px;
}

.digit.static{
        box-shadow:1px 1px 1px rgba(4, 4, 4, 0.35);
        
        background-image: linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
        background-image: -o-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
        background-image: -moz-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
        background-image: -webkit-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
        background-image: -ms-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
        
        background-image: -webkit-gradient(
                linear,
                left bottom,
                left top,
                color-stop(0.5, #3A3A3A),
                color-stop(0.5, #444444)
        );
}

/**
 * Вы можете использовать эти стили для скрытия некоторых блоков
 */

.countDays{ /* display:none !important;*/ }
.countDiv0{ /* display:none !important;*/ }
.countHours{}
.countDiv1{}
.countMinutes{}
.countDiv2{}
.countSeconds{}


.countDiv{
        display:inline-block;
        width:16px;
        height:1.6em;
        position:relative;
}

.countDiv:before,
.countDiv:after{
        position:absolute;
        width:5px;
        height:5px;
        background-color:#444;
        border-radius:50%;
        left:50%;
        margin-left:-3px;
        top:0.5em;
        box-shadow:1px 1px 1px rgba(4, 4, 4, 0.5);
        content:'';
}

.countDiv:after{
        top:0.9em;
}

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

Элементы span с классом .countDiv – это разделители между блоками цифр. Эта структура сформирована с помощью :before/:after атрибутов.

Как же формируется эта разметка?

jQuery

Для начала, создадим две вспомогательные функции используемые плагином:

init – формирует разметку, которую вы только что видели.

switchDigit – получает .positionspan и анимирует цифры в нем.

Отделение этих функций от кода плагина, позволяет держать код плагина в чистоте.

jquery.countdown.js – вспомогательные функции

function init(elem, options){
        elem.addClass('countdownHolder');

        // Создание HTML разметки внутри контейнера
        $.each(['Days','Hours','Minutes','Seconds'],function(i){
                $('<span class="count'+this+'">').html(
                        '<span class="position">\
                                <span class="digit static">0</span>\
                        </span>\
                        <span class="position">\
                                <span class="digit static">0</span>\
                        </span>'
                ).appendTo(elem);

                if(this!="Seconds"){
                        elem.append('<span class="countDiv countDiv'+i+'"></span>');
                }
        });

}

// Создает анимационный эффект между двумя цифрами таймера
function switchDigit(position,number){

        var digit = position.find('.digit')

        if(digit.is(':animated')){
                return false;
        }

        if(position.data('digit') == number){
                // We are already showing this number
                return false;
        }

        position.data('digit', number);

        var replacement = $('<div>',{
                'class':'digit',
                css:{
                        top:'-2.1em',
                        opacity:0
                },
                html:number
        });

        // The .static class is added when the animation
        // completes. This makes it run smoother.

        digit
                .before(replacement)
                .removeClass('static')
                .animate({top:'2.5em',opacity:0},'fast',function(){
                        digit.remove();
                })

        replacement
                .delay(100)
                .animate({top:0,opacity:1},'fast',function(){
                        replacement.addClass('static');
                });
}

Отлично! Теперь напишем основу плагина. Наш плагин, должен принимать объект с параметрами для удобства настройки – время к которому ведется отсчет, callback функция, вызываемая с каждой секундой она обновляет время.

jquery.countdown.js

(function($){

        // количество секунд в каждом блоке времени
        var days        = 24*60*60,
                hours   = 60*60,
                minutes = 60;

        // создание плагина
        $.fn.countdown = function(prop){

                var options = $.extend({
                        callback        : function(){},
                        timestamp       : 0
                },prop);

                var left, d, h, m, s, positions;

                // Инициализация таймера
                init(this, options);

                positions = this.find('.position');

                (function tick(){

                        // Оставьшееся время
                        left = Math.floor((options.timestamp - (new Date())) / 1000);

                        if(left < 0){
                                left = 0;
                        }

                        // Количество оставшихся дней
                        d = Math.floor(left / days);
                        updateDuo(0, 1, d);
                        left -= d*days;

                        // Количество оставшихся часов
                        h = Math.floor(left / hours);
                        updateDuo(2, 3, h);
                        left -= h*hours;

                        // Количество оставшихся минут
                        m = Math.floor(left / minutes);
                        updateDuo(4, 5, m);
                        left -= m*minutes;

                        // Количество оставшихся секунд
                        s = left;
                        updateDuo(6, 7, s);

                        // Callback
                        options.callback(d, h, m, s);

                        // Автоматический вызов этой функции каждую секунду
                        setTimeout(tick, 1000);
                })();

                // Эта функция обновляет две цифры в блоке
                function updateDuo(minor,major,value){
                        switchDigit(positions.eq(minor),Math.floor(value/10));
                        switchDigit(positions.eq(major),value);
                }

                return this;
        };

        /* Две вспомогательные функции, которые мы создали ранее */
})(jQuery);

Функция tick, вызывает себя каждую секунду. Таким образом, мы можем считать разницу во времени. Функция updateDuo обновляет цифры.

jQuery таймер готов! – посмотрим, как его можно использовать в коде.

Использование jQuery таймера

Просто вставьте следующие строки кода в вашем файле с JavaScript.

script.js

$(function(){

        var note = $('#note'),
                ts = new Date(2012, 0, 1),
                newYear = true;

        if((new Date()) > ts){
                // The new year is here! Count towards something else.
                // Notice the *1000 at the end - time must be in milliseconds
                ts = (new Date()).getTime() + 10*24*60*60*1000;
                newYear = false;
        }

        $('#countdown').countdown({
                timestamp       : ts,
                callback        : function(days, hours, minutes, seconds){

                        var message = "";

                        message += days + " day" + ( days==1 ? '':'s' ) + ", ";
                        message += hours + " hour" + ( hours==1 ? '':'s' ) + ", ";
                        message += minutes + " minute" + ( minutes==1 ? '':'s' ) + " and ";
                        message += seconds + " second" + ( seconds==1 ? '':'s' ) + " <br />";

                        if(newYear){
                                message += "left until the new year!";
                        }
                        else {
                                message += "left to 10 days from now!";
                        }

                        note.html(message);
                }
        });

});

Конечно же, нужно подключить CSS и JS файлы таймера к вашей странице.

Цикличность

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

$(function(){

var note = $('#note'),
        ts = new Date(2012, 0, 1),
        newYear = true;

if((new Date()) > ts){
        var t = new Date();
        var beforeTommorow = (24-t.getHours())*60*60*1000+(60-t.getMinutes())*60*1000+(60-t.getSeconds())*1000;
        ts = (new Date()).getTime() + beforeTommorow;
        newYear = false;
}
        
$('#countdown').countdown({
        timestamp       : ts,
        callback        : function(days, hours, minutes, seconds){
                
                var message = "";
                
                message += days + " day" + ( days==1 ? '':'s' ) + ", ";
                message += hours + " hour" + ( hours==1 ? '':'s' ) + ", ";
                message += minutes + " minute" + ( minutes==1 ? '':'s' ) + " and ";
                message += seconds + " second" + ( seconds==1 ? '':'s' ) + " <br />";
                
                if(newYear){
                        message += "left until the new year!";
                }
                else {
                        message += "left to 10 days from now!";
                }
                
                note.html(message);
        }
});

});

Что еще?

Вы можете использовать скрипт, как отличное дополнение на каждой странице перед важным событием. Лучшее в jquery таймере то, что он не использует изображений, все работает на чистом CSS коде.

Дальше: CSS центрирование DIV блоков: горизонтальное и вертикальное