Однажды, подбирая картинки для сайта, мы наткнулись на этот рисунок и нам сразу захотелось сделать такие же часы на javascript.
Здесь нам не потребуется писать много 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 с id=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, one, two, three, four, five, six, seven, eight, nine, dots (что они означают мы расскажем во второй части, хотя, вы, наверняка, догадались), и содержат семь span-элементов с уникальными классами. Эти span-элементы - не что иное, как элементы цифр в наших javascript-часах часах:
Все они оформлены c помощm. CSS, а CSS свойство opacity (уровень непрозрачности) по умолчанию равно нулю. Класс, заданный по отношению к их родительскому div-блоку,- это то, что делает их видимыми. Вот как будет выглядеть CSS-код для нуля:
.digits div.zero .d1,
.digits div.zero .d3,
.digits div.zero .d4,
.digits div.zero .d5,
.digits div.zero .d6,
.digits div.zero .d7{
opacity:1;
}
Все элементы цифры видны на циферблате за исключением центрального (иначе это будет цифра 8). Мы добавили CSS3-свойство transition ко всем этим span-элементам. Это позволит нам анимировать уровень непрозрачности при смене цифр. В файле также есть множество другого кода, но о нем мы вам рассказывать сейчас не будем. Нам кажется, что лучше всего изучать CSS посредством редактирования в реальном времени при помощи Firebug, Inspector в Chrome, либо при помощи инструментов разработчиков в вашем любимом браузере.
Чтобы наши часы заработали, нам нужно использовать jQuery, чтобы сгенерировать разметку для каждой цифры, и выставить таймер на обновление классов каждую секунду. Чтобы облегчить нашу жизнь, мы воспользуемся библиотекой moment.js, чтобы компенсировать отсутствие родных функций javascript – date и time.
// Кэшируем некоторые селекторы
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 class="dots">');
}
else{
var pos = $('<div>');
for(var i=1; i<8; i++){
pos.append('<span class="d' + i + '">');
}
// Определить цифры как пары ключ:значение в объекте digits
digits[this] = pos;
// Добавим цифры на страницу
digit_holder.append(pos);
}
});
// Добавляем названия дней недели
var weekday_names = 'ПОН ВТ СР ЧТ ПТ СБ ВС'.split(' '),
weekday_holder = clock.find('.weekdays');
$.each(weekday_names, function(){
weekday_holder.append('' + this + '');
});
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--;
// Воскресенье!
if(dow < 0){
// Сделать последним
dow = 6;
}
// Отмечаем текущий день недели
weekdays.removeClass('active').eq(dow).addClass('active');
// Устанавливаем am/pm text:
ampm.text(now[7]+now[8]);
// Запускаем эту функцию через каждую секунду
setTimeout(update_time, 1000);
})();
// Переключаем тему
$('a.button').click(function(){
clock.toggleClass('light dark');
});
Здесь самой главной является функция update_time. Внутри нее мы получаем текущее время в виде строки, а затем используем его для заполнения элементов часов и устанавливаем нужные классы для цифр.
На сегодня мы закончили писать часы на javascript! В следующем уроке мы займемся разработкой часов с будильником, мелодии которого будут проигрываться с помощью HTML5 тега audio!