Заходи
Гость

Хостинг

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

Ccылки

Свежак

Главная » 2013 » Сентябрь » 1 » Цифровые часы на JQuery и CSS3
12:26
Цифровые часы на 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.

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

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

Категории
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 © 2018Конструктор сайтов - uCoz