1. 조건

현재 시간을 받아오며, 시침, 분침, 초침이 있어야 하며 시간을 나타내는 숫자와 각 분/초를 가르키는 라인이 있어야한다.

2. 설계

시간을 가르키는 시침
분을 가르키는 분침
초를 가르키는 초침
각각 시/분/초침이 360도를 돌아야한다.
규칙이 있는 Elements들은 js를 통해서 구현해보도록 한다.

3. 구현

시계상 보이는 시간의 max값은 12 그리고 분,초는 60이며 각각 가르키는 바늘이 360도를 돌아야한다. 해당사항을 변수에 초기화를 시켜준 후 구현한다.

clockFn()에서 Date객체를 사용해서 실시간을 받아오며, 해당 함수안에서 시,분,초침의 각도를 계산한다. (현재 / 각각의 max값 * 360도)

또한 createNumbers() createSecLines() 각각 함수에서는 일정한 규칙을 가지고 있는 Element들을 생성해준다.

createNumbers()의 경우 1~12까지의 숫자(현시계의 시간 max값 = 12)를 for문을 사용하여 12개의 Elements를 만듦과 동시에 rotate를 사용하여 각각 배치한다.