Это основной скрипт их:
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 демонстрация НЕ РАБОТАЕТ).
Transform:rotate - новое свойство CSS 3, которое позволяет поворачивать различные элементы. С помощью трансформаций можно также изменять масштаб элементов, вводить искажения по горизонтали и вертикали, перемещать элементы по веб странице. Все это может быть анимировано с помощью свойства transition (с разными типами переходов и длительностью).
Такие же действия по анимации элементов страницы можно выполнять с помощью какой-нибудь библиотеки JavaScript (например, jQuery). Конечно, с помощью jQuery можно анимировать изменение гораздо большего количества свойств CSS, чем с помощью transition . Но jQuery является встроенным средством CSS, библиотеки JavaScript - внешние инструменты, которые могут быть и недоступны. В любом случае, CSS3 открывает новые перспективные направления для развития разработчика.
ГрафикаСначала надо сделать графический интерфейс для часов. У нас будет основание и три стрелки. Все движущиеся части нарезаны в Photoshop по размерам 600px в высоту и 30px в ширину, и позиционируются вертикально, а по умолчанию свойство rotate вращает элемент вокруг центра. Можно использовать свойство transform-origin для того, чтобы установить центр вращения в другую точку.
Для основания часов можно использовать какое угодно изображение. Движущиеся части являются изображениями формате PNG с прозрачностью.
В архив с исходным кодом демонстрации включен PSD файл, который содержит все изображения.
Разметка для часов - простой неупорядоченный список. Каждый элемент списка содержит движущуюся часть и имеет соответствующий 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Следует отметить, что 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 не связанное с дизайном.
Сделаем электронные часы с датой и временем с помощью jQuery и CSS3 для небольшой анимации.
HTMLРазметка простая и гибкая. Создаем DIV с классом clock , DIV с классом Date , который будет отображать дату и неупорядоченный список, содержащий часы, минуты и секунды.
CSS
Стили оформления с небольшой анимацией:
Container {width: 960px; margin: 0 auto; overflow: hidden;} .clock {width:800px; margin:0 auto; padding:30px; border:1px solid #333; color:#fff; } #Date { font-family: Arial, Helvetica, sans-serif; font-size:36px; text-align:center; text-shadow:0 0 5px #00c6ff; } ul { width:800px; margin:0 auto; padding:0px; list-style:none; text-align:center; } ul li { display:inline; font-size:10em; text-align:center; font-family:Arial, Helvetica, sans-serif; text-shadow:0 0 5px #00c6ff; } #point { position:relative; -moz-animation:mymove 1s ease infinite; -webkit-animation:mymove 1s ease infinite; padding-left:10px; padding-right:10px; } @-webkit-keyframes mymove { 0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;} 50% {opacity:0; text-shadow:none; } 100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; } } @-moz-keyframes mymove { 0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;} 50% {opacity:0; text-shadow:none; } 100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; } }
JSПодключаем jQuery библиотеку
И далее наш скрипт $(document).ready(function() { // Создаем две переенные с названиями месяцев и дней недели в массиве var monthNames = [ "Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь" ]; var dayNames= ["Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота"] // Создаем объект newDate() var newDate = new Date(); // Извлекаем текущую дату из объекта Date newDate.setDate(newDate.getDate()); // Навыходе день, дата, месяц и год $("#Date").html(dayNames + " " + newDate.getDate() + " " + monthNames + " " + newDate.getFullYear()); setInterval(function() { // Создаем объект newDate() и извлекаем секунды текущего времени var seconds = new Date().getSeconds(); // Добавляем начальный ноль к значению секунд $("#sec").html((seconds < 10 ? "0" : "") + seconds); },1000); setInterval(function() { // Создаем объект newDate() и извлекаем минуты текущего времени var minutes = new Date().getMinutes(); // Добавляем начальный ноль к значению минут $("#min").html((minutes < 10 ? "0" : "") + minutes); },1000); setInterval(function() { // Создаем объект newDate() и извлекаем часы из текущего времени var hours = new Date().getHours(); // Добавляем начальный ноль к значению часов $("#hours").html((hours < 10 ? "0" : "") + hours); }, 1000); });
- new Date() - создает новый объект Date со значением текущей даты и текущего времени в браузере компьютера.
- setDate() - метод устанавливает день месяца (от 1 до 31), по местному времени
- getDate() - метод возвращает день месяца (от 1 до 31) для указанной даты по местному времени
- getSeconds(), getMinutes() и getHours() - эти методы позволяют извлекать секунды, минуты и часы текущего времени в браузер.
- (seconds < 10 ? "0" : "") + seconds) - добавляет начальный ноль к значению секунд (минут и часов). Символы ? и : включают тернарный (ternary ) оператор. Это специальный оператор, который возвращает значение перед двоеточием, если условие перед вопросом (? ) верно (true ), или значение после двоеточия , если условие неверно (false ).
- Функция setInterval - это стандартная jаvascript функция, не часть jQuery . Выполняет код много раз, через равные промежутки времени (миллисекунды).
Это простой скрипт, который показывает системное время на 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 » . Секунды, минуты и часы, кстати, всегда двузначные, поэтому смена значений происходит гладко.