Автор

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 коде.

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

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


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

Неприятно, когда ты тратишь несколько часов на то, чтобы написать какую статью, размещаешь ее на своем сайте, а потом она оказывается еще на нескольких ресурсах без указания ссылки на первоисточник. Эти методы не дают стопроцентной гарантии, однако снизить количество подобных случаем помогают. Существуют и другие эффективные средства – защита от копирования текста средствами JavaScript. Использование скриптов помогает затруднить работу копипастерам, заставив их тратить больше времени на копирование контента.


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

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


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

В этом учебнике по HTML 5 и CSS 3 расскрываются стандарты нового  поколения разработки веб приложений на простых и работающих примерах. В наше время основные браузеры и мобильные устройства поддерживают спецификации HTML 5 и CSS 3. Эти новейшие технологии это основа последующего поколения интернет-разработок. Преимущества технологий нового поколения явны: удобство и комфорт для пользователя, для программиста - простота и удобства.


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close