Я создал этот компонент после прохождения профессионального собеседования в начинающей компании.
пример использования был:
1. создать компонент, отображающий как аналоговые, так и цифровые часы.
2. аналоговые часы должны отображать часы, минуты и секунды.
3. компонент должен быть возможность отображать разные часовые пояса. например, первые часы будут отображать время Нью-Йорка, а вторые - время Лондона.
мне дали 90 минут, чтобы закончить это.
Давай приступим к работе!
Перво-наперво - создайте файл компонента (clock.jsx) и создайте структуру HTML:
как вы можете видеть, у компонента есть название, аналоговые часы и цифровые часы. аналоговые часы содержат 3 циферблата - часы, минуты и секунды.
давайте добавим немного CSS, чтобы они больше походили на настоящие часы :). Я буду использовать sass для удобства.
давайте создадим файл с именем clock.scss (вы можете использовать обычный файл css, если хотите) и вставьте следующий код:
Я объясню, что я здесь сделал:
1. Корпус часов - он был создан с использованием блока шириной 100 пикселей и высотой с радиусом (свойство border-radius) 50%, что делает это круг.
2. Каждый циферблат сделан из коробки, которая имеет размер радиуса круга, который в нашем случае составляет 50 пикселей.
3. Мы даем рамку только одной стороне каждой шкалы циферблата - я использовал черный для часов, красный для минут и зеленый для секунд.
4. Теперь я расположил шкалы в нижнем левом углу в центре корпуса часов, используя left: 50 %.
5. iv'e добавил ко всем циферблатам свойство css: transform-origin: bottom left;, чтобы у каждого циферблата была база вращения снизу - левый угол шкалы.
6. Я сделал циферблат короче и толще, как в настоящих часах.
теперь давайте заставим его двигаться как часы
нам нужна функция, которая создает время, которое компонент будет использовать для отображения аналоговых и цифровых часов. я назову его handleDate. он будет принимать вызов свойства dateiff, который позволяет компоненту отображать текущее время в каждом экземпляре компонента. например, если текущее время в Лондоне - 12:00 - в Нью-Йорке время - 08:00.
остальное - просто создать простой объект Date, извлечь из него текущие часы, минуты и секунды и сохранить его в состоянии компонента.
чтобы эта функция запускалась каждую секунду, я добавлю setInterval, когда компонент монтируется в дом. и не забудьте очистить интервал, когда компонент отключен.
в функции рендеринга я добавил стиль для каждого циферблата со свойством rotaion css. в течение секунд я использовал transform: rotate ($ {seconds * 6} deg), который занимает секунды (скажем, текущая секунда равна 15) и умножает его на 6, чтобы получить количество градусов, которое мне нужно поверните циферблат. в нашем случае это 90 градусов. то же самое касается минут. для часов я умножаю их на 30, потому что в наших часах всего 12 часов ...
И последнее - для отображения цифровых часов я добавлю «0», если число меньше 10.
вот как я это сделал:
наконец, в нашем приложении мы можем импортировать компонент и использовать его следующим образом:
вот и все, ребята.
