Як зробити цифровий годинник з допомогою css3 і jquery
Все почалося з того, що якось раз я побачив ось такий скріншот. І тут же я відчув, що просто зобов'язаний перетворити його в реально працюючі годинник і поділитися ними з усіма бажаючими.
Багато HTML для цього годинника не потрібно, і пов'язано це з тим, що велика їх частина, включаючи назви днів тижня і код для цифр, генеруються динамічно.
Отже, ось розмітка, яка знадобиться для вставки годин на сторінку.
Головний елемент, блок з id = clock. містить клас display. який, в свою чергу, містить список днів тижня, позначку AM / PM. іконку будильника і саме час.
А ось згенерувала розмітка для однієї з цифр:
Елемент з класом digits буде містити 6 таких контейнерів div з елементами span. - по одному контейнеру для кожної з цифр, які представляють даний час.
Як ви можете бачити по фрагменту вище, ці контейнери отримують імена від zero до nine (тобто від нуля до дев'яти) і містять сім елементів span з унікальними класами. Ці елементи являють собою сегменти цифр, як у звичайний цифрових годинниках:
Вони повністю стилизуются за допомогою CSS, а їх прозорість за умовчанням встановлена в значення opacity: 0. Клас, призначений їх батьківського контейнера - ось, що робить їх видимими. Ось стилі для нуля.
Всі сегменти видимі, за винятком горизонтального в центрі (інакше вийшла б вісімка замість нуля). Також я додав властивість transition. за допомогою якого відбувається анімація ступеня прозорості в момент перемикання між цифрами.
Звичайно, в стилях ще багато коду, але тут я його наводити не буду. Я переконаний, що найкращий спосіб зрозуміти, як працює CSS - це вивчити код працюючого прикладу за допомогою Firebug або вбудованого в Chrome інструменту для дослідження коду.
Щоб змусити наш годинник працювати, нам доведеться використовувати jQuery для генерації розмітки цифр і для установки таймера, за яким часом буде оновлюватися кожну секунду.
Найважливіший шматок коду тут - це функція update_time. Всередині неї ми отримуємо поточний час як рядок і використовуємо її як для визначення елементів годин, так і для уставновкі потрібних назв класів для чисел.
Наші годинник готові!
За матеріалами tutorialzine.com
Переклад: Дмитро Науменко