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

Всегда в теме

Статистика


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


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

Рекомендуем



Главная » 2013 » Сентябрь » 1 » Цифровые часы на JQuery и CSS3


12:41
Цифровые часы на JQuery и CSS3

Цифровые часы на JQuery и CSS3

 


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

 

ДЕМО                         СКАЧАТЬ

 

Разметка

index.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>

 

 

Основной элемент, DIV # часы, содержит. Дисплей, который в свою очередь содержит список: будни  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>

 

 

Элементы цифр будут содержать 6  <DIV> с пробелами, по одному для каждой цифры. Как вы можете видеть из фрагмента выше, эти дивы получат имя класса от нуля до девяти, и содержат семь элементов с уникальными классами.

 

Цифры

Они оформлены полностью с CSS и настроены на прозрачность: 0 по умолчанию. 

 Вот CSS для нулевого класса:

активов / CSS / styles.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;

}

 

 

Все сегменты видны, за исключением среднего (иначе это было бы 8). Я добавил свойство CSS3 переходов на все эти пролеты, который активизирует непрозрачность  при переключении между номерами.

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

 

 

Темная тема

JQuery код

Чтобы сделать часы рабочими, мы должны будем использовать JQuery для создания разметки для каждой из цифр, и установить таймер для обновления классов  каждую секунду. Чтобы упростить нашу задачу, мы будем использовать moment.js  и библиотеку ( Quick Tip ), чтобы компенсировать недостающий JavaScript  функции даты и времени.

активы / JS / script.js

 

$(function(){

 

    // Cache some selectors

 

    var clock = $('#clock'),

        alarm = clock.find('.alarm'),

        ampm = clock.find('.ampm');

 

    // Map digits to their names (this will be an array)

    var digit_to_name = 'zero one two three four five six seven eight nine'.split(' ');

 

    // This object will hold the digit elements

    var digits = {};

 

    // Positions for the hours, minutes, and seconds

    var positions = [

        'h1', 'h2', ':', 'm1', 'm2', ':', 's1', 's2'

    ];

 

    // Generate the digits with the needed markup,

    // and add them to the clock

 

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

 

    $.each(positions, function(){

 

        if(this == ':'){

            digit_holder.append('<div class="dots">');

        }

        else{

 

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

 

            for(var i=1; i<8; i++){

                pos.append('<span class="d' + i + '">');

            }

 

            // Set the digits as key:value pairs in the digits object

            digits[this] = pos;

 

            // Add the digit elements to the page

            digit_holder.append(pos);

        }

 

    });

 

    // Add the weekday names

 

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

 

    // Run a timer every second and update the clock

 

    (function update_time(){

 

        // Use moment.js to output the current time as a string

        // hh is for the hours in 12-hour format,

        // mm - minutes, ss-seconds (all with leading zeroes),

        // d is for day of week and A is for 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]]);

 

        // The library returns Sunday as the first day of the week.

        // Stupid, I know. Lets shift all the days one position down,

        // and make Sunday last

 

        var dow = now[6];

        dow--;

 

        // Sunday!

        if(dow < 0){

            // Make it last

            dow = 6;

        }

 

        // Mark the active day of the week

        weekdays.removeClass('active').eq(dow).addClass('active');

 

        // Set the am/pm text:

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

 

        // Schedule this function to be run again in 1 sec

        setTimeout(update_time, 1000);

 

    })();

 

    // Switch the theme

 

    $('a.button').click(function(){

        clock.toggleClass('light dark');

    });

 

});

 

 

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

ДЕМО                         СКАЧАТЬ

 

Ссылка на источник

Наши цифровые часы готовы!  Часть 2 "Добавление сигнала" , где мы будем добавлять  поддержку будильников и воспроизведения с аудио HTML5.

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

Поиск

Вход

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

    Категории

    Заходи не жди