Как использовать здравый смысл, HTML, CSS и JS. Сделать аналоговые часы
24 мая 2022 г.HTML — это язык строительных блоков, CSS — язык стилей, а JS — рабочий язык. Мы делаем это шаг за шагом.
Сначала сюжетная линия, я начал писать коды без структуры, так как просто хотел увидеть результат, неважно, чем закончится код, я просто хотел увидеть что-то работающее на моем экране.
Угадайте, что ничего не работает так, как я планирую.
Во-первых, мы пишем базовую HTML-структуру, создаем div для часов и добавляем к нему необходимые стили.
<голова>
<название>
<стиль>
Базовая структура HTML.
<тело>
<голова>
<название>
<стиль>
Часы{
цвет фона: небесно-голубой;
высота: 300 пикселей;
ширина: 300 пикселей;
- радиус границы: 50%; Стиль часов
переполнение: скрыто;
положение: родственник;
<тело>
<див ID="часы">
- Открытие и закрытие div для макета часов
Вывод становится;
Другие «div» создаются для чисел внутри div «Clock».
<див ID="часы">
Ожидается, что мы получим это;
Обратите внимание, что числа спрятаны внутри кривой и кажутся прямыми, но мы должны распределить числа, чтобы занять различные позиции, как в настоящих часах. Сначала мы применяем этот стиль к общему стилю чисел.
Достаточно скоро я узнал, что битва заключается не только в высоком настроении, но и в четком определении масштаба проекта.
Принимая во внимание, что написание кода — это создание лего, одна ошибка, и все рухнет.
часы .n{
--вращение:0;
положение: абсолютное;
ширина: 100%;
высота: 100%;
выравнивание текста: по центру;
размер шрифта: 1.7rem;
преобразование: повернуть (вар (--вращение));
Обратите внимание, что мы включили переменную «rotation», чтобы мы могли стилизовать отдельные имена идентификаторов/классов и применять конкретную степень вращения, которую мы хотим применить. Например, (--rotation:30deg-330deg;) означает, что мы устанавливаем угол поворота на 30 градусов.
Цифры забиты и мы хотим расставить их на свои места. Поэтому мы применяем наши различные степени к каждому из идентификаторов и классов, которые мы создали для чисел.
когда я сталкиваюсь с очень сложной логикой и кажется, что все разваливается, я учитываю стратегию возврата и обзора в #debugging.
Я разбиваю части и компилирую их, отслеживая ошибки, иногда это может быть изнурительно и утомительно, но вскоре я учусь терпению и самоотверженности.
часы .num1 {--rotation:30deg;}
часы .num2 {--rotation:60deg;}
часы .num3 {--rotation:90deg;}
часы .num4 {--rotation:120deg;}
часы .num5 {--rotation:150deg;}
часы .num6 {--rotation:180deg;}
часы .num7 {--rotation:210deg;}
часы .num8 {--rotation:240deg;}
часы .num9 {--rotation:270deg;}
часы .num10 {--rotation:300deg;}
часы .num11 {--rotation:330deg;}
часы .num12 {--rotation:360deg;}
Мы видим, что каждое число расположено в различных степенях, но часы кажутся пустыми, так как часовой, минутной и секундной стрелок нет. Мы создаем эти руки, создавая разные элементы div для каждой руки и стилизуя их по своему вкусу.
Div для всех рук.
Мы стилизуем общую стрелку часов и каждую стрелку;
Обычная стрелка часов держит секундную, минутную и часовую стрелки внизу, пока они вращаются вокруг часов, поэтому мы включаем transform-origin:bottom;
Чтобы повернуться на одну секунду, что эквивалентно одному градусу, мы устанавливаем поворот на 1 градус, по умолчанию мы установим все стрелки (обычные стрелки часов) на 12.
часы .рука{
--вращение:0;
положение: абсолютное;
низ: 50%;
слева: 50%;
цвет фона: черный;
граница: 1px сплошной белый;
граница-верхний-левый-радиус: 10px;
граница-верхний-правый-радиус: 10px;
z-индекс: 10;
преобразование-происхождение: дно;
преобразование: перевести (-50%) повернуть (рассчитать (вар (--вращение) * 1 градус));
часы::после{
содержание: '';
положение: абсолютное;
цвет фона: ярко-розовый;
z-индекс: 11;
ширина: 15 пикселей;
высота: 15 пикселей;
верх: 50%;
слева: 50%;
преобразование: перевести (-50%, -50%);
радиус границы: 50%;
часы .стрелка.час{
ширина: 8,5 пикселей;
высота: 35%;
цвет фона: черный;
часы .стрелка.мин{
ширина: 5,5 пикселей;
высота: 40%; Стайлинг для каждой руки.
цвет фона: черный;
часы .стрелка.сек{
ширина: 2,5 пикселя;
высота: 45%;
цвет фона: красный;
Ожидается, что после приведенного выше кода мы получим это;
Мы замечаем, что руки просто зафиксированы в одной точке. Мы не добавили рабочий язык (JS), поэтому часы остаются статичными.
Теперь, когда мы закончили со стилем, мы применяем Javascript, чтобы наши стрелки двигались в соответствии с нашим текущим временем. На этот раздел нужно обратить особое внимание.
Во-первых, мы устанавливаем интервал часов и вызываем имя функции, которую мы должны использовать, и время, которое вы хотите, внутри функции интервала.
<скрипт>
setInterval (setClock, 1000)
Затем создайте три константы или переменные секундная стрелка, минутная стрелка и часовая стрелка, чтобы связать их с
HTML-разделы для стрелки часов с помощью document.querySelector.
<скрипт>
setInterval (setClock, 1000)
const hourHand = document.querySelector('[данные-часовая стрелка]')
const minuteHand = document.querySelector('[data-min-hand]')
const secondHand = document.querySelector('[data-sec-hand]')
Внутри функции установки часов создайте константу и присоедините к ней функцию НОВАЯ ДАТА. Функция новой даты помогает получить последнюю дату системы.
Кроме того, создайте еще одну константу с именем secondsRatio и получите секунды от новой даты.
Сделайте то же самое для соотношения минут, затем добавьте к нему «secondsRatio» и разделите на 60.
<скрипт>
setInterval (setClock, 1000)
const hourHand = document.querySelector('[данные-часовая стрелка]')
const minuteHand = document.querySelector('[data-min-hand]')
const secondHand = document.querySelector('[data-sec-hand]')
функция setClock () {
const текущая дата = новая дата ()
константные секундыRatio = currentDate.getSeconds() / 60
const minuteRatio = (secondsRatio + currentDate.getMinutes()) / 60
const hoursRatio = (minutesRatio + currentDate.getHours()) / 12
setRotation (секундная стрелка, соотношение секунд)
setRotation(minuteHand, минутыRatio)
setRotation(hourHand, hoursRatio)
функция setRotation (элемент, Ratio) {
element.style.setProperty('--rotation', Ratio * 360)
установитьчасы()
После применения этого сценария стрелки по-прежнему остаются на месте, потому что мой селектор запросов, который является константой, не добавляется в мой html, поэтому он ничего не выбирает.
const hourHand = document.querySelector('[данные-часовая стрелка]')
const minuteHand = document.querySelector('[data-min-hand]')
const secondHand = document.querySelector('[data-sec-hand]')
Как только это будет сделано, наши часы автоматически заработают.
Наконец, вы делаете это правильно, чувствуете облегчение, но не сейчас, документируете свой процесс, записываете процесс и просматриваете его, когда закончите.
Это удерживает знания внутри вас и помогает создавать лучшие программы или проекты в будущем.
Спасибо.
Написано командой @learnHub в Африке
Оригинал