Цифровые часы с помощью jQuery и CSS3

Сегодня мы сделаем красивые цифровые часы с помощью jQuery и CSS3.

HTML

Для часов не потребуется много html, потому что большая часть элементов (дни недели, код самих цифр) будет генерироваться автоматически.

Разметка:

<div id="clock" class="light">
    <div class="display">
        <div class="weekdays"></div>
        <div class="ampm"></div>
        <div class="alarm"></div>
        <div class="digits"></div>
    </div>
</div>

Основной элемент #clock, содержит .display, в котором будут находиться список дней недели, метка AM/PM, иконка будильника и цифры.

<div class="zero">
    <span class="d1"></span>
    <span class="d2"></span>
    <span class="d3"></span>
    <span class="d4"></span>
    <span class="d5"></span>
    <span class="d6"></span>
    <span class="d7"></span>
</div>

Элемент .digits будет содержать 6 div’ов со span’ами внутри, по одному на каждую цифру. Как будет видно далее, эти div’ы будут принимать классы от zero до nine, внутри будет по 7 span’ов с уникальными классами. Эти span’ы — части цифр:

Они полностью оформлены на CSS и по-умолчанию прозрачные (opacity:0). Класс, назначенный содержащему их элементу будет делать их видимыми. CSS для нуля:

/* 0 */

#clock .digits div.zero .d1,
#clock .digits div.zero .d3,
#clock .digits div.zero .d4,
#clock .digits div.zero .d5,
#clock .digits div.zero .d6,
#clock .digits div.zero .d7{
    opacity:1;
}

Все сегменты видны, кроме среднего (иначе это будет восьмерка). Так же ко всем span’ам применен CSS3 эффект transition для анимации перехода от одной цифры к другой.

jQuery

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

$(function(){
    var clock = $('#clock'),
        alarm = clock.find('.alarm'),
        ampm = clock.find('.ampm');

    // Массив с именами классов
    var digit_to_name = 'zero one two three four five six seven eight nine'.split(' ');

    // В этом объекте будут содержаться элементы разметки цифр
    var digits = {};

    // ЧЧ:ММ:СС
    var positions = [
        'h1', 'h2', ':', 'm1', 'm2', ':', 's1', 's2'
    ];

    // Генерация разметки

    var digit_holder = clock.find('.digits');

    $.each(positions, function(){

        if(this == ':'){
            digit_holder.append('<div>');
        }
        else{

            var pos = $('<div>');

            for(var i=1; i<8; i++){
                pos.append('<span class="d' + i + '">');
            }

            digits[this] = pos;

            // Добавляем цифру на страницу
            digit_holder.append(pos);
        }

    });

    // Дни недели
    var weekday_names = 'MON TUE WED THU FRI SAT SUN'.split(' '),
        weekday_holder = clock.find('.weekdays');

    $.each(weekday_names, function(){
        weekday_holder.append('<span>' + this + '</span>');
    });

    var weekdays = clock.find('.weekdays span');

    // Обновляем часы каждую секунду
    (function update_time(){

        // Используем moment.js для вывода текущего времени
        // hh - часы в 12 часовом формате,
        // mm - минуты, ss-секунды,
        // d - день недели и A - AM/PM

        var now = moment().format("hhmmssdA");

        digits.h1.attr('class', digit_to_name[now[0]]);
        digits.h2.attr('class', digit_to_name[now[1]]);
        digits.m1.attr('class', digit_to_name[now[2]]);
        digits.m2.attr('class', digit_to_name[now[3]]);
        digits.s1.attr('class', digit_to_name[now[4]]);
        digits.s2.attr('class', digit_to_name[now[5]]);

        // Библиотека думает что воскресение - первый день недели.
        // Поправим это сдвигом дней недели на одну позицию вниз

        var dow = now[6];
        dow--;

        // Sunday!
        if(dow < 0){
            // делаем воскресение последним
            dow = 6;
        }

        // Выделяем текущий день
        weekdays.removeClass('active').eq(dow).addClass('active');

        ampm.text(now[7]+now[8]);

        // Вызываем каждую секунду
        setTimeout(update_time, 1000);

    })();

    // смена темы

    $('a.button').click(function(){
        clock.toggleClass('light dark');
    });

});

Часы готовы!