Цифровий годинник на CSS3 та jQuery. Стрілочний годинник з використанням CSS3 Javascript чорний електронний годинник

Простий цифровий годинник, який виводить час вашої системи. Тут все зроблено на 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">

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

Це простий скрипт, який показує системний час 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». Секунди, хвилини та години, до речі, завжди двозначні, тому зміна значень відбувається гладко.

Зробимо електронний годинникз датою та часом з допомогою 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-shadow:0 style:none; text-align:center ; 00c6ff; ) #point ( position:relative; -moz-animation:mymove 1s ease infinite; -webkit-animation:mymove 1s ease infinite; padding-left:10px; padding-right:10px; ) @-webkit-keyfra 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() ( // Створюємо дві перейняті з назвами місяців і днів тижня в масиві ", "Червень", "Липень", "Серпень", "Вересень", "Жовтень", "Листопад", "Грудень" ]; ,"Четвер","П'ятниця","Субота"] // Створюємо об'єкт newDate() var newDate = new Date(); день, дата, місяць і рік $("#Date").html(dayNames + " " + newDate.getDate() + " " + monthNames + " " + newDate.getFullYear()); / Створюємо об'єкт 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 . Виконує код багато разів, через рівні проміжки часу (мілісекунди).

Ми вже розбирали створення стрілочного годинника з використанням 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; left: 285px; -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 ").css(("-moz-transform" : hrotate, "-webkit-transform" : hrotate)); ), 1000);setInterval(function() ( var mins = new Date(). mdegree = mins * 6; var mrotate = "rotate(" + mdegree + "deg)"; $("#min"). ); ), 1000);

Ми використовуємо функцію JavaScript setIntervalдля оновлення стилів кожну секунду. Змінні, які отримують значення часу, повинні оновлюватися в ній. Інакше годинник стане марним сміттям на сторінці.

Висновок

У цьому уроці продемонстровано практичне застосуваннявластивості rotateне пов'язане із дизайном.