30일 Javascript 따라해보기 메모(2) - CSS 시계

자. 2일분량 회차다.🙂 아무쪼록, 잘해보자.

구현내용은 여기 있으니까, 영상 안보고 만들면 된다.

3개의 핸들이 겹쳐있다. 뭘 하면 돌릴 수 있을까? 트랜스폼 rotate이다. 그리고 이 회전 힌지? (접히는 부분 돌리는 포인트를 끝쪽으로 밀어서 중심이 되어 돌아가게 조절하는게

transform-origin: 100%;

핸들이 어떻게 만들어지는지 동작에 대한 부분을 검토.🔥 트랜스폼과 트랜지션으로 해결본다. 

째각째각도 아래 코드로 만들기. 나는 이렇게 했다.

      transition-timing-function: cubic-bezier(0.4, 0, 0.38, 1.84);

그 후 1000ms 마다 setInteval로  1초마다 현재 초를 구분하고, 초마다 넘어가는 각도도 Dedgree로 정하고.

초단위 앵글단위로 잘 넘어가나 봤으면

분단위 , 시단위 아무거나 골라서 초단위로 움직이는지 테스트 완료하고.

각 남은 핸들(초, 분 시)에 대한 핸들링을 먹인 후, 동작하는지 확인하고, (여기까지하면 반복코드가 보인다.)

길이조정 정도 남았고, 코드정리가 남았네. (안하네?)

아니네, 시간이 넘어갈 때 90도에서 0도로 넘어갈 때 나는 너무 순간적으로 튕기니까
트랜지션 타이밍 함수를 좀 변경해야할 것 같다.

코드정리 부분은 반복되는 부분을 함수로 묶어 빼는것이 좋다.

끝