Создаем анимированные часы/таймер при помощи CSS и jQuery

В этой статье, мы расскажем вам, как создать красочные и анимированные jQuery/CSS часы в стиле “Halo”, которые помогут вам следить за драгоценным временем.

Шаг 1 – XHTML

Как обычно, мы начинаем с разметки XHTML. Хитрость состоит в том, что XHTML не содержится в demo.html, но динамически вставляется в страницу с помощью jQuery.

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

Давайте взглянем на XHTML, который вставляется jQuery:

<!-- Первый класс (зеленый в данном случае) выделяется динамически -->
<div class="green clock"</div>

<!-- Этот div хранит значение единиц, - секунд, минут или часов -->
<div class="display"></div>

<!-- Черная область, которая скрывает основной фон -->
<div class="front left"></div>

<!-- Левая часть фона: -->
<div class="rotate left">
<div class="bg left"></div>
</div>

<!-- Правая часть фона: -->
<div class="rotate right">
<div class="bg right"><div id="fcbg"></div></div>
</div>

</div>

Этот код содержится в jquery.tzineClock / jquery.tzineClock.js. Он генерируется три раза: первый для часов, второй для минут, и третий для секунд. Затем, они анимируются и обновляются каждую секунду.

Существуют три класса, которые присваиваются самому верхнему контейнеру в процессе генерации – зеленый, синий и красный. Мы меняем цвет циферблата путем присвоения того или инного класса.

Переходим к следующему шагу…

Шаг 2 – CSS

Прежде, чем наши стили будут иметь какое либо влияние на страницу, мы должны включить их в head часть нашего файла:

demo.html

<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="jquery.tzineClock/jquery.tzineClock.css" />

Эти строки кода, импортируют styles.css и jquery.tzineClock.css на страницу. Первый, стилизует демо страницу, а второй, красочные циферблаты (они являются частью плагина).

Теперь мы можем более внимательно взглянуть на правила CSS:

styles.css

body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
    /* Простой сброс страницы */
    margin:0;
    padding:0;
}

body{
    /* Установка по умолчанию цвет текста, фона и шрифта */
    color:#fff;
    font-size:13px;
    background: #222;
    font-family:Arial, Helvetica, sans-serif;
}

#fancyClock{
    height:200px;
    width:600px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-100px 0 0 -300px;
}

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

Затем, мы стилизуем body страницы и fancyClock div, в который, мы позже вставим три циферблата. Также центрируем его на экране за счет абсолютной позиции и смещения величины margin.

jquery.tzineClock.css

.clock{
    /* .clock div Динамически создан jQuery */
    background-color:#222;
    height:200px;
    width:200px;
    position:relative;
    overflow:hidden;
    float:left;
}

.clock .rotate{
    /* Есть два .rotate divs - один для каждый половины фона-подложки */
    position:absolute;
    width:200px;
    height:200px;
    top:0;
    left:0;
}

.rotate.right{
    display:none;
    z-index:11;
}

.clock .bg, .clock .front{
    width:100px;
    height:200px;
    background-color:#222;
    position:absolute;
    top:0;
}

.clock .display{
    /* Содержит число секунд, минут или часов */
    position:absolute;
    width:200px;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    z-index:20;
    color:#F5F5F5;
    font-size:60px;
    text-align:center;
    top:65px;
    left:0;

    /* CSS3 text shadow: */
    text-shadow:4px 4px 5px #333333;
}

/* Левая часть бэкграунда */

.clock .bg.left{ left:0; }

/* Индивидуальная стилизация каждого цвета : */
.orange .bg.left{ background:url(img/bg_orange.png) no-repeat left top; }
.green .bg.left{ background:url(img/bg_green.png) no-repeat left top; }
.blue .bg.left{	background:url(img/bg_blue.png) no-repeat left top; }

/* Правая часть бэкграунда */
.clock .bg.right{ left:100px; }

.orange .bg.right{ background:url(img/bg_orange.png) no-repeat right top; }
.green .bg.right{ background:url(img/bg_green.png) no-repeat right top; }
.blue .bg.right{ background:url(img/bg_blue.png) no-repeat right top; }

.clock .front.left{
    left:0;
    z-index:10;
}
#fcbg{ background:url(img/bg_grey.png)
repeat-x; width:600px;height:200px;z-index:11;position:absolute;}

jquery.tzineClock.css является частью нашего плагина (наряду c jquery.tzineClock.js) и он стилизирует красочные циферблаты . Контейнер #fcbg является нашей подложкой под циферблаты и показывает границы циферблата.

Одним из наиболее интересных моментов, является использование отдельных правил для стилизации цвета циферблатов.

Шаг 3 – jQuery

Перенос всего JavaScript в плагин делает очень легким повторное использование кода, и в то же время позволяет нам использовать возможности jQuery селекторов и методов.

Чтобы была возможность использовать jQuery библиотеку, мы сначала должны, включить пару скриптов в страницу:

demo.html

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tzineClock/jquery.tzineClock.js"></script>
<script type="text/javascript" src="script.js"></script>

Первым файлом, является сама библиотека, включена из Google CDN. Затем, у нас есть плагин и скрипт-файл, который запускает демо.

script.js

$(document).ready(function(){
    /* Этот код выполняется после того, как DOM был полностью загружен */

    $('#fancyClock').tzineClock();

});

Давайте копнём немного глубже в плагин:

jquery.tzineClock.js – Часть 1

(function($){
    // Глобальный объект используемый функцией плагина:
    var gVars = {};

    // Продление основы jQuery:

    $.fn.tzineClock = function(opts){

        // "this" содержит элементы, которые были выбраны при вызове плагина:
	$('elements').tzineClock();
        // Если селектор вернул более одного элемента, мы используем первый:
        var container = this.eq(0);
        if(!container)
        {
            try{
                console.log("Invalid selector!");
            } catch(e){}

            return false;
        }

        if(!opts) opts = {};

        var defaults = {
            /* Дополнительные опции будут добавлены в будущих версиях плагина. */
        };

        /* Слияние предоставленых параметров с параметрами по умолчанию,
(будет использоваться в будущих версиях плагина): */

        $.each(defaults,function(k,v){
            opts[k] = opts[k] || defaults[k];
        });

        // Вызов функции setUp и передача container,
        // будет доступна для setUp функции, как "this":

        setUp.call(container);

        return this;
    }

    function setUp()
    {
        // Цвета циферблата:
        var colors = ['orange','blue','green'];

        var tmp;
        for(var i=0;i<3;i++)
        {
            // Создание нового элемента и установка цвета, как имя класса:

            tmp = $('<div>').attr('class',colors[i]+' clock').html(
                '<div class="display"></div>'+
                '<div class="front left"></div>'+
                '<div class="rotate left">'+
                '<div class="bg left"></div>'+
                '</div>'+
                '<div class="rotate right">'+
                '<div class="bg right"></div>'+
                '</div>'
            );

            // Присоединение к fancyClock контейнеру:
            $(this).append(tmp);

            // Назначение некоторых элементов как переменных, для скорости:
            tmp.rotateLeft = tmp.find('.rotate.left');
            tmp.rotateRight = tmp.find('.rotate.right');
            tmp.display = tmp.find('.display');

            // Добавление циферблата, как глобальной переменной.
Будет доступна в качестве gVars.colorName
            gVars[colors[i]] = tmp;
        }

        //Настройка интервала, выполняемого каждые 1000 миллисекунд:
        setInterval(function(){

            var currentTime = new Date();
            var h = currentTime.getHours();
            var m = currentTime.getMinutes();
            var s = currentTime.getSeconds();

            animation(gVars.green, s, 60);
            animation(gVars.blue, m, 60);
            animation(gVars.orange, h, 24);
        },1000);
    }

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

Например, в script.js, мы выбираем div ширину id fancyClock и используем tzineClock () метод: $ (‘# FancyClock’) tzineClock ();. Элементы, которые мы выбрали, позже передаются tzineClock функции и доступны через “this” свойство.

Поскольку, там может быть выбран более чем один элемент, мы извлекаем только первый из множества с помощью eq(0) метода. Позже, у нас есть setUp() функция, которая вставляет разметки для циферблатов и настраивает интервал, который будет обновлять цифры каждую секунду.

jquery.tzineClock.js – Часть 2

function animation(clock, current, total)
    {
        // Расчет текущего угла:
        var angle = (360/total)*(current);

        var element;

        if(current==0)
        {
            //Скрытие правой половины background:
            clock.rotateRight.hide();

            // Сброс вращения левой части:
            rotateElement(clock.rotateLeft,0);
        }

        if(angle<=180)
        {
            // Левая часть вращается, а правая, в настоящее время, скрыта:
            element = clock.rotateLeft;
        }
        else
        {
            // Первая часть вращения завершен, поэтому начинает вращаться
правая часть:
            clock.rotateRight.show();
            clock.rotateLeft.show();

            rotateElement(clock.rotateLeft,180);
            element = clock.rotateRight;

            angle = angle-180;
        }

        rotateElement(element,angle);

        // Настройка текста внутри элемента, вставки нуля, если необходимо:
        clock.display.html(current<10?'0'+current:current);
    }

    function rotateElement(element,angle)
    {
        // Вращение элемента, в зависимости от браузера:
        var rotate = 'rotate('+angle+'deg)';

        if(element.css('MozTransform')!=undefined)
            element.css('MozTransform',rotate);

        else if(element.css('WebkitTransform')!=undefined)
            element.css('WebkitTransform',rotate);

        // Версия для Internet Explorer с помощью фильтров, работает,
но немного с багами:

        else if(element.css("filter")!=undefined)
        {
            var cos = Math.cos(Math.PI * 2 / 360 * angle);
            var sin = Math.sin(Math.PI * 2 / 360 * angle);

            element.css("filter","progid:DXImageTransform.Microsoft.Matrix
(M11="+cos+",M12=-"+sin+",M21="+sin+",M22="+cos+",SizingMethod='auto expand',
FilterType='nearest neighbor')");
            element.css("left",-Math.floor((element.width()-200)/2));
            element.css("top",-Math.floor((element.height()-200)/2));
        }
    }
})(jQuery)

Последние две функции, используемые плагином, это animation и rotateElement. Первая функция обновляет циферблат, в соответствии с переданными значениями (мы также передаем параметр с максимальным значением, для того, чтобы функция могла вычислить вращение).

Вторая функция – вращает переданный элемент. Вращение работает только для Firefox, Safari, Chrome и IE6 +. Internet Explorer не поддерживает CSS3 rotation, используемый другими браузерами, но предоставляет фильтр, который позволяет сделать подобное преобразование.

На этом, наши красочные часы jQuery готовы! Высоких вам конверсий!