Створіть аналоговий годинник за допомогою полотна
від IQAndreas | 26 лютого 2014 року
Сьогодні ми виготовимо класичний аналоговий годинник, використовуючи функції полотна, знайдені в HTML5. Годинник, який ви будете створювати, виглядатиме наступним чином:
Цей годинник насправді живе! Він повинен відображати ваш поточний системний час та оновлення, коли проходить кожна секунда. У цьому підручнику ви дізнаєтеся все про те, як це зробити. Давайте розпочнемо.
Дуже важлива примітка
У рамках створення нашого годинника ви отримаєте бонусні бали, якщо будете слухати будь-яку музику відповідної тематики!
Починаємо
Ми збираємось поступово додавати HTML, CSS та JavaScript, щоб врешті-решт створити наш чудовий аналоговий годинник. Почнемо спочатку з базового HTML. Створіть новий документ HTML і додайте такий код:
Якщо ви переглянете те, що ми маємо на даний момент, насправді не так багато для побачення. Давайте частково це виправимо, додавши наступний CSS між тегами стилю:
І нарешті, давайте додамо трохи JavaScript, щоб все почало рухатися! Додайте такий код всередину тегів сценарію:
На цьому етапі перегляньте свою сторінку. Якщо ваша сторінка виглядає не так, перевірте, чи правильно ви завантажили JavaScript:
Тепер, коли ми маємо основи і працюємо, настав час перейти до цього.
Виготовлення цифрових годинників
Отже, ви хочете зробити аналоговий годинник? Поволі там, приятелю!
Спочатку ми додамо цифровий годинник. Причина в тому, що це допоможе нам навчитися використовувати клас Date - клас, який містить багато функціональних можливостей, які ми будемо використовувати для відображення правильного часу. По-друге, починаючи з цифрового годинника, значно полегшить налагодження нашого аналогового годинника (повірте мені на цьому).
Отримання дати
Якщо ви хочете отримати поточний час у JavaScript, це можна зробити, просто викликавши new Date (). Відредагуйте свій існуючий код JavaScript усередині функції displayTime, додавши два виділені рядки:
Якщо ви переглянете документ зараз, ви побачите дату, що відображається:
Хоча це не годинник ні в цифровому, ні в аналоговому сенсі, принаймні ми рухаємось у напрямку, який здається правильним. З урахуванням сказаного, вказана дата БАГАТО більше інформації, ніж нам насправді потрібно. Нам доведеться написати власний код для відображення часу, а не покладатися на toString () для правильного форматування.
Щоб допомогти нам трохи спростити дані, клас Date має кілька методів. Зараз все, про що нам потрібно турбуватися, це часові функції:
Оскільки всі ці значення є числами, хоча це може бути не завжди потрібно, нам справді слід перетворити їх за допомогою String (num), перш ніж намагатися відобразити їх:
Ваш повний код усередині функції displayTime тепер виглядатиме так:
Якщо ви переглянете те, що у вас є зараз, ви побачите щось таке, що виглядає наступним чином:
Ну це працює, але це виглядає трохи «смішно». По-перше (якщо ви проігноруєте годинну частину), ви помітите, що з’являється незвичний час 18: 54: 1. Більшість цифрових годинників додають додаткові нулі до хвилини та другої частини, щоб забезпечити двозначне значення, тож годинник насправді повинен відображатись 18:54:01 .
Додамо функцію з назвою padZero який додає нуль до початку числа, якщо потрібно:
Ця функція padZero приймає число як аргумент. Якщо число має менше двох цифр (тобто менше 10), ми додаємо нуль на початку числа, щоб воно відображалося як дві цифри з 0, що становить першу цифру. Якщо число вже є двоцифровим, ми нічого не робимо, а просто розшифровуємо його як частину повернення.
Давайте використаємо цю функцію в нашому прикладі. Замініть рядок змінної timeString такою зміненою версією:
Наш повний JavaScipt на даний момент буде виглядати так:
На цьому етапі ваш час тепер відображатиметься більш правильно, без однозначних чисел, що не відображаються без нуля перед ними. Однак є одна річ, яка буде виглядати дивно.
Але це армійський час!
Якщо ви країна, яка не використовує цілодобовий годинник (кашель, кашель, Америка), вас може заплутати або, принаймні, дратувати той факт, що годинне значення на нашому годиннику перевищує 12. Хоча цілодобовий годинник зрозуміліше і менш двозначне, ми могли б також перетворити його на 12-годинний годинник, щоб усі люди по всьому світу могли це зрозуміти.
Ми напишемо функцію, яка перетворює годину на 12-годинну. По-перше, ми будемо використовувати оператор модуля, щоб переконатися, що година є значенням між 0 і 11. Але оскільки немає 0-й години в 12-годинному годиннику, ми переконуємось, що значення ніколи не відображається, змінюючи його на 12 замість цього.
Для цього виконайте функцію formatHour:
Крім того, нам все ще потрібен спосіб визначити, чи використовувати AM або PM. Спосіб його налаштування дещо хитрий (замовлення - 11 ранку, 12 вечора, 13 вечора, коли насправді, було б більш розумно називати це 12 ранку). Ви можете написати функцію, яка робить це ретельно, але ми скористаємось ярликом, який може бути не дуже зрозумілим. але це працює:
Після того, як ви додали до коду функції formatHour і getTimePeriod, продовжуйте і знову модифікуйте свою змінну timeString усередині displayTime наступним чином:
Якщо ви переглянете свою сторінку ще раз, тепер ваш час відображатиметься наступним чином:
Тадааа! Тепер у вас є цифровий годинник. Він не оновлюється щосекунди, але наразі це нормально. Ми розглянемо цю деталь в рамках створення нашого аналогового годинника найближчим часом.
Малювання аналогового годинника
Тут починається найцікавіше! Пам’ятаєте той елемент, який так терпляче чекав нас? Трохи складно зрозуміти, де знаходиться сторінка, тож давайте «просунемо», перенісши наш контур з цифрового годинника на наше полотно.
У вашому CSS переконайтеся, що виділений рядок відображається в правилі стилю # clock, на відміну від правила # поточного часу:
Якщо ви попередньо переглядаєте свою сторінку, тепер ви побачите окреслене полотно на відміну від самого часу:
Тестування полотна
Давайте переконаємося, що наше полотно працює належним чином, намалювавши на ньому кілька ліній. Буде зручно залишити там цифровий годинник (таким чином ми бачимо поточний час над аналоговим годинником), тому просто залиште старий JavaScript всередині функції displayTime там, де він є, і додайте код для аналогового годинника відразу після нього.
Спочатку ми проведемо червону лінію від центру годинника праворуч (3 години). Додайте такі виділені рядки до функції displayTime: