Автор

19 03.2013
jQuery таймер обратного отсчета

jQuery таймер обратного отсчета


 

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

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

Лично я использовал этот скрипт на сайте Усадьбы «Сказка» (он показывает время до окончания голосования в фотоконкурсе).

Что же, начнем…

 

ДЕМО
ИСХОДНИКИ

 

 

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 файлы таймера к вашей странице.

Что еще?

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


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

27 04.2013
jQuery таймер обратного отсчета

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


04 04.2013
jQuery таймер обратного отсчета

Порой на сайте хочется выделить красиво какую либо информацию, тем самым привлечь внимание пользователя к необходимой информации. Все это можно сделать с помощью различных эффектов, в данном уроке мы рассмотрим как создать эффект размытия элементов сайта сайта с помощью CSS3 и jQuery.  Идея заключается в организации набора блоков с текстом, которые будут размываться и уменьшаться в масштабе при наведении курсора мыши на один из них. Блок, который получает фокус ввода, наоборот будет увеличиваться.


15 04.2013
jQuery таймер обратного отсчета

Навигационное меню использующее новые возможности CSS3 (изображения и javascript не используются). Эффекты можно наблюдать только в последних webkit браузерах.


19 04.2013
jQuery таймер обратного отсчета

В данном уроке мы рассмотрим слайдер изображений с анимированными подписи, отзывчивым интерфейсом и HTML элементами, как видео, IFrame и регулятора. При этом легко добавить неограниченное количество слайдов и заголовков. Используйте его в качестве слайдера изображений, галереи фотографий, ротатора для баннерной рекламы, или даже презентации. Чтобы существенно сократить время загрузки страницы, предварительная загрузка доступна для каждого слайдера, так что изображение будут загружаться постепенно.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close