Цифровые часы на CSS3 и jQuery. Стрелочные часы с использованием CSS3 Программа часы написанная на javascript

Это простой скрипт, который показывает системное время на JavaScript простым текстом. Часы, минуты и секунды через двоеточие – и все.

Для того, чтобы задать свой стиль часам, достаточно определить стиль для блока с ID – #time . В CSS Вы можете задать свой шрифт для часов, его цвет и размер. Если Вам нужны не простые часы, а более сложные, то посмотрите Flash часы для сайта . Откуда скрипт берет данные о времени? Показывается время именно то, которое установлено на устройстве.

Установка

Вставьте следующий код в то место на сайте, где хотите увидеть часы. На uCoz это может быть, например, «Верхняя» или «Нижняя части сайта»:

200?"200px":""+(this.scrollHeight+5)+"px");">
00:00:00

setInterval(function () {
date = new Date(),
h = date.getHours(),
m = date.getMinutes(),
s = date.getSeconds(),
h = (h < 10) ? "0" + h: h,
m = (m < 10) ? "0" + m: m,
s = (s < 10) ? "0" + s: s,
document.getElementById("time").innerHTML = h + ":" + m + ":" + s;
}, 1000);

Скрипт сразу покажет в том месте, где Вы его установили, строчку текста с часами. Например, «00:00:00 » . Секунды, минуты и часы, кстати, всегда двузначные, поэтому смена значений происходит гладко.

Простые цифровые часы, которые будут выводит время вашей системы. Здесь все сделано на JavaScript, что вы можете их редактировать в дизайн. Установка их также проста как и сами они, вы можете поставить их вверх сайта, где можно основном их увидеть. Плюс в том, как говорилось, вы их можете сделать как вам нужно, все зависит от ID – #time где в Панель HTML кодов работает, но все подробнее.

Это основной скрипт их:

200?"200px":""+(this.scrollHeight+5)+"px");">00:00:00

setInterval(function () {
date = new Date(),
h = date.getHours(),
m = date.getMinutes(),
s = date.getSeconds(),
h = (h < 10) ? "0" + h: h,
m = (m < 10) ? "0" + m: m,
s = (s < 10) ? "0" + s: s,
document.getElementById("time").innerHTML = h + ":" + m + ":" + s;
}, 1000);

В самом верху мы видим:

200?"200px":""+(this.scrollHeight+5)+"px");">00:00:00

Просто добавляем жирный текст и желтый оттенок и стрелки.

200?"200px":""+(this.scrollHeight+5)+"px");">«00:00:00»

И вот что получилось:

Так что сами видите, как все поменялось, и теперь вы сами можете все сделать и красиво выставить под свои стили. Что другие невозможно сделать, так как там идет Flash, что здесь их нет.

Теперь в добавок часы на Flash

200?"200px":""+(this.scrollHeight+5)+"px");">
.swf">

Так что можете выбрать, какие вам больше нравятся и поставить, ведь одни можно в блок установить, а вот первые больше нравятся, так как они гибкие и под настройку, что каждый может сделать.

Мы уже разбирали создание стрелочных часов с использованием CSS и JavaScript. В данном уроке такие же часы сделаем с использованием CSS3, чтобы посмотреть, насколько новый стандарт изменяет подход к разработке различных эффектов. Демонстрация для данного урока будет работать только в тех браузерах, которые поддерживают свойство CSS3 rotate (в IE6 демонстрация НЕ РАБОТАЕТ).

CSS3 Transform:rotate

Transform:rotate - новое свойство CSS 3, которое позволяет поворачивать различные элементы. С помощью трансформаций можно также изменять масштаб элементов, вводить искажения по горизонтали и вертикали, перемещать элементы по веб странице. Все это может быть анимировано с помощью свойства transition (с разными типами переходов и длительностью).

Такие же действия по анимации элементов страницы можно выполнять с помощью какой-нибудь библиотеки JavaScript (например, jQuery). Конечно, с помощью jQuery можно анимировать изменение гораздо большего количества свойств CSS, чем с помощью transition . Но jQuery является встроенным средством CSS, библиотеки JavaScript - внешние инструменты, которые могут быть и недоступны. В любом случае, CSS3 открывает новые перспективные направления для развития разработчика.

Графика

Сначала надо сделать графический интерфейс для часов. У нас будет основание и три стрелки. Все движущиеся части нарезаны в Photoshop по размерам 600px в высоту и 30px в ширину, и позиционируются вертикально, а по умолчанию свойство rotate вращает элемент вокруг центра. Можно использовать свойство transform-origin для того, чтобы установить центр вращения в другую точку.

Для основания часов можно использовать какое угодно изображение. Движущиеся части являются изображениями формате PNG с прозрачностью.

В архив с исходным кодом демонстрации включен PSD файл, который содержит все изображения.

Разметка HTML

Разметка для часов - простой неупорядоченный список. Каждый элемент списка содержит движущуюся часть и имеет соответствующий id:

CSS

#clock { position: relative; width: 600px; height: 600px; margin: 20px auto 0 auto; background: url(clockface.jpg); list-style: none; } #sec, #min, #hour { position: absolute; width: 30px; height: 600px; top: 0px; left: 285px; } #sec { background: url(sechand.png); z-index: 3; } #min { background: url(minhand.png); z-index: 2; } #hour { background: url(hourhand.png); z-index: 1; }

CSS также является весьма простым. Так как движущиеся части имеют одинаковые размеры и начальные точки, то мы можем объявить их вместе, чтобы избежать повторения. Элемент ul получает относительное позиционирование, что позволяет использовать абсолютное позиционирование для расположенных в нем стрелок.

CSS3 будет применяться с помощью небольшого кода jQuery.

JavaScript

Получаем время для часов

Вычисляем и вставляем стили CSS (угол вращения) для каждого элемента.

Обновляем стили CSS через равные промежутки времени.

Следует отметить, что jQuery отлично работает с новыми свойствами CSS3. Кроме того, так как стили добавляются динамически, то CSS файл проходит проверку как CSS2.1!

Получаем время

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

Мы будем получать информацию с помощью Date() и установим все наши переменные. Будем использовать соответственно GetSeconds() , GetMinutes() или GetHours() для Date() чтобы установить соответственно секунды, минуты и часы:

Var seconds = new Date().getSeconds();

В выше приведенной строчке будет получено число из промежутка от 0 до 59 и присвоено переменной seconds .

Определяем угол

Затем надо вычислить угол вращения для каждой стрелки. Для секундной и минутной стрелок, которые имеют 60 положений на часовом круге, нам нужно разделить 360 градусов на 60, что даст нам число 6. То есть каждая секунда или минута соответствует повороту на 6 градусов. Будем хранить результат вычислений в другой переменной. Для секунд код выглядит так:

Var sdegree = seconds * 6;

Для часов вычисления будут другими. Так как у нас циферблат с 12 положениями для часовой стрелки, то каждому часу соответствует угол поворота на 30 градусов (360/12=30). Но часовая стрелка должна находиться и в промежуточных состояниях, то есть, она должна сдвигаться с каждой минутой. То есть в 4:30 часовая стрелка должна находиться на полпути между 3 и 4 часами. Вот как мы это сделаем:

Var hdegree = hours * 30 + (mins / 2);

То есть мы добавляем к углу поворота на количество часов еще и значение деления количества минут на 2 (что даст нам величину в диапазоне от 0.5 до 29.5). Таким образом, часовая стрелка будет "довернута" на угол от 0 до 30 градусов (часовой инкремент).

Например:

2 часа 40 минут -> 2*30 = 60 градусов и 40/2 = 20 градусов. Итого: 80 градусов.

Можно предположить, что часы покажут невесть что после 12, так как значение поворота будет больше 360 градусов. Но все работает отлично.

Теперь у нас все готово, чтобы вставлять правила CSS.

Устанавливаем стиль

Вот как выглядит правило CSS3 rotate в таблице стилей:

#sec { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); }

А вот так будет осуществляться вставка кода с помощью jQuery:

$("#sec").css({"-moz-transform" : "rotate(45deg)", "-webkit-transform" : "rotate(45deg)"});

Проблема заключается только в том, чтобы выставить полученное значение угла в переменной "sdegree" в синтаксис вместо 45 градусов. Нужно построить строку в другой переменной srotate и полностью заменить второй аргумент. Вот так:

Var srotate = "rotate(" + sdegree + "deg)";

А код jQuery будет выглядеть вот так:

$("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});

Собираем все вместе

Код jQuery будет выглядеть следующим образом:

$(document).ready(function() { setInterval(function() { var seconds = new Date().getSeconds(); var sdegree = seconds * 6; var srotate = "rotate(" + sdegree + "deg)"; $("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate}); }, 1000); setInterval(function() { var hours = new Date().getHours(); var mins = new Date().getMinutes(); var hdegree = hours * 30 + (mins / 2); var hrotate = "rotate(" + hdegree + "deg)"; $("#hour").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate}); }, 1000); setInterval(function() { var mins = new Date().getMinutes(); var mdegree = mins * 6; var mrotate = "rotate(" + mdegree + "deg)"; $("#min").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate}); }, 1000); });

Мы используем функцию JavaScript setInterval для обновления стилей каждую секунду. Переменные, которые получают значения времени должны обновляться в ней. Иначе часы станут бесполезным мусором на странице.

Заключение

В данном уроке продемонстрировано практическое применение свойства rotate не связанное с дизайном.