Полезное в сети

Всегда в теме

Статистика


Яндекс.Метрика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Рекомендуем



Главная » 2014 » Февраль » 25 » Создание JQuery Таймер


20:35
Создание JQuery Таймер

Создание JQuery Таймер


 


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

  

СМОТРЕТЬ ДЕМО                СКАЧАТЬ ИСХОДНИК

 

Давайте начнем с разметки!

HTML

Дадим плагину  творческое  название "обратный отсчет". Вставляется в пустой элемент, 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>

 

В приведенном выше примере, добавили countdownHolder класс (несколько стилей применяются к элементу через CSS).

Цифры собраны в группах, что позволяет легко укладывать их. Добавление размера шрифта в. countDays , будет влиять на размер цифр дней.

 

В . countDiv пролеты являются разделителями между единицами. Толстая линия  формируется: перед  и после элементов.

Но как эта разметка генерируется?

JQuery

Прежде всего, давайте напишем  две вспомогательные функции, используемые плагином:

  • init  генерирует разметку которую вы видели выше;
  • switchDigit  занимает промежуточное  положение и оживляет цифры внутри него.;

jquery.countdown.js

 

function init(elem, options){

        elem.addClass('countdownHolder');

 

        // Creating the markup inside the container

        $.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>');

            }

        });

 

    }

 

    // Creates an animated transition between the two numbers

    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');

            });

    }

  

 

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

Обратный отсчет / jquery.countdown.js

 

(function($){

 

    // Number of seconds in every time division

    var days           = 24*60*60,

        hours            = 60*60,

        minutes      = 60;

 

    // Creating the plugin

    $.fn.countdown = function(prop){

 

        var options = $.extend({

            callback   : function(){},

            timestamp             : 0

        },prop);

 

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

 

        // Initialize the plugin

        init(this, options);

 

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

 

        (function tick(){

 

            // Time left

            left = Math.floor((options.timestamp - (new Date())) / 1000);

 

            if(left < 0){

                left = 0;

            }

 

            // Number of days left

            d = Math.floor(left / days);

            updateDuo(0, 1, d);

            left -= d*days;

 

            // Number of hours left

            h = Math.floor(left / hours);

            updateDuo(2, 3, h);

            left -= h*hours;

 

            // Number of minutes left

            m = Math.floor(left / minutes);

            updateDuo(4, 5, m);

            left -= m*minutes;

 

            // Number of seconds left

            s = left;

            updateDuo(6, 7, s);

 

            // Calling an optional user supplied callback

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

 

            // Scheduling another call of this function in 1s

            setTimeout(tick, 1000);

        })();

 

        // This function updates two digit positions at once

        function updateDuo(minor,major,value){

            switchDigit(positions.eq(minor),Math.floor(value/10)%10);

            switchDigit(positions.eq(major),value%10);

        }

 

        return this;

    };

 

    /* The two helper functions go here */

 

Функция назначает для себя каждую секунду. Внутри него, мы вычисляем разницу во времени между данной меткой времени и текущей датой. UpdateDuo  функция обновляет цифры содержащие единицу времени.

 

Плагин готов! 

/ JS / 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 файл из папки обратного отсчета в вашей странице.

Готово!

Источник

Категория: CSS//HTML//JS | Просмотров: 1514 | Добавил: Wrecker | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

Гость
  • Вход
  • Регистрация
  • Читаемое

    Категории

    Заходи не жди