Заходи
Гость

Хостинг

Статистика
Яндекс.Метрика Счетчик PR-CY.Rank
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Ccылки

Свежак

Главная » 2014 » Февраль » 25 » Создание JQuery Таймер
20:38
Создание 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 файл из папки обратного отсчета в вашей странице.

Готово!

Источник

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

Статьи
[Менеджмент]
Факторы микросреды организации
[Безопасность систем]
Защита исходных текстов и двоичного кода
[Устронение ошибок систем]
Возможные нежелательные последствия разгона
[Устронение ошибок систем]
Сообщения об ошибках AMI BIOS (часть 2)
[Операционные системы]
MAC OS
[Прогараммирование]
Совместимость типов объектов
[Информатика]
. АНАЛИЗ ТЕОРИИ ЭКСПЕРТНЫХ СИСТЕМ И ВЫВОДЫ
[Прогараммирование]
Введение в информатику
[Прогараммирование]
Разработка ПО с открытыми исходными текстами как особый вид прикладной науки
[Менеджмент]
Факторы микросреды организации

Категории
HTML/CSS [21]
jQuery/JS [36]
PHP [4]
Для Ucoz [38]

Популярный софт
Iron Kaspersky Internet Security 2015
Kaspersky Internet Security 2015
Iron Virtual DJ
Virtual DJ
Iron SoundForge 11
SoundForge 11
Iron Alcohol 120
Alcohol 120
Iron Norton Internet Security 2014
Norton Internet Security 2014
Iron Loaris Trojan Remover
Loaris Trojan Remover

Жми

Copyright MyCorp © 2017Конструктор сайтов - uCoz