Автор

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

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

Бывают случаи, когда вы хотите представить пользователю выбор, с фокусом веб-страницы являются разные варианты. Независимо от того, является ли это модальной навигацией или списком категорий, сегодняшний самородок вас охватывает!


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

Если вы начинаете разрабатывать сайт, вам необходимо сделать визуальное представления о том, что вы получите в конечном результате, конечно каждый из вас хочет сделать оригинальный сайт, с креативным организацией материала. Последней тенденцией, которая набирает все больших оборотов в веб-дизайне, является эффект объемного переворота страниц. Несомненно, это выглядит достаточно эффектно, и привлекает взор посетителя. В данном уроке мы рассмотрим как создать полноэкранный эффект переворота страниц для сайта.


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

Как часто вы замечали так называемые "вееры" с выбором цвета, или прочей информацией с магазинах. Это достаточно удобный подход, для экономии места, при этом предоставляется возможность хранить множество информации в достаточно малом объеме места. В данном уроке мы рассмотрим пример создания такой книжки образцов для сайта с помощью jquery и css3, в которой панели воспринимают нажатия кнопки мыши, после чего происходит открытие нужной страницы. В демонстрации приводится несколько примеров организации книги.


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

Наверное каждому разработчику попадался заказ по созданию и организации портфолио. Лично мне весьма нравятся такие заказы, ведь заказчик хочет чего-то оригинального, и тут необходима фантазия и проявления творческой сноровки.  Не знаю как вам, но мне не хочется делать одинаковые шаблоны всем заказчикам. Надо делать дизайн, друзья мои, такой, чтобы вам не было за него стыдно. Ведь если ваше творение, в данном случае, к примеру, портфолио, поразит заказчика, то он вас наверняка порекомендует своим знакомым. А вам это только на пользу.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close