—»     —»   Цифровые часы на jQuery и CSS3
  Раздел: Руководства   Нет комментариев  

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



Все началось тогда, когда мы наткнулись на этот снимок в dribbble. Нам тут же захотелось преобразовать это в рабочие часы и поделиться ими с читателями. Если вам хочется узнать, как сделать это, продолжайте читать!

Разметка

Здесь вам не понадобится много 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 #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-элементы представляют собой часть цифр как в старых цифровых часах:

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

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

assets/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 transition ко всем этим span-элементам, которое позволит нам анимировать уровень непрозрачности при смене цифр.

В файле также есть множество другого кода, но о нем мы вам рассказывать сейчас не будем. Нам кажется, что лучше всего изучать CSS посредством редактирования в реальном времени при помощи Firebug, Inspector в Chrome, либо при помощи инструментов разработчиков в вашем любимом браузере.

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

jQuery-код

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

assets/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. Внутри нее мы получаем текущее время в виде строки, и используем его для заполнения элементов часов, а также выставляем нужные классы для цифр.

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

Смотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, CSS
Опубликовал Design FactoRy   Прочитано (раз): 4966   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Сопровождение Битрикс
Полное сопровождение вашего сайта. Договор, гарантия сроков, качества
extyl-pro.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31