Ожидается, что мы получим это;

Обратите внимание, что числа спрятаны внутри кривой и кажутся прямыми, но мы должны распределить числа, чтобы занять различные позиции, как в настоящих часах. Сначала мы применяем этот стиль к общему стилю чисел.

Достаточно скоро я узнал, что битва заключается не только в высоком настроении, но и в четком определении масштаба проекта.

Принимая во внимание, что написание кода — это создание лего, одна ошибка, и все рухнет.

часы .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 в Африке