Wesbos - Clock

---

CSS와 JS를 이용해 아날로그 시계를 구현해보는 챕터다.
시침 분침 초침이 시간에 따라 움직이도록 하려면 어떻게 해야할까?

로직

시간이 변할 때

1. 시간이 지날 때마다 침들의 deg에 변화를 준다. (rotate)

   = 1초, 1분, 1시간을 기준으로!

   = 각도는 360도를 기준으로!

2. 침이 움직일 때 (CSS)

   = transition 효과를 줘서 실제 시계 침의 움직임과 유사하도록 구현 (째깍째깍의 느낌)

---

코딩 과정

1. 초침, 분침, 시침을 지정해주자

const hoursHand = document.querySelector('.hour-hand');
const minutesHand = document.querySelector('.min-hand');
const secondsHand = document.querySelector('.second-hand');

그렇다면….. 시간의 흐름을 어떻게 get하고 표현해야할까?

---

2. 현재 시, 분, 초를 불러오기

현재 시,분,초에 따라 침들의 각도가 달라져야 하기 때문에, 시분초를 불러오는게 가장 먼저 해야 할 일 !

Date(), getHours(), getMinutes(), getSeconds()

👉 new Date()를 통해 현재 년월일 시분초를 불러올 수 있다.

이후, Date 내에서 getOOO을 통해 시 분 초를 골라서 사용할 수 있음 !

function setDate() {
  const now = new Date();
  const hours = now.getHours();
  const minutes = now.getMinutes();
  const seconds = now.getSeconds();
}

---

3. 현재 시, 분, 초에 따른 침들의 각도 지정하기!

👉 transform = rotate(OOdeg); 를 활용 !

const secondsDegrees = (seconds / 60) * 360 + 90;
secondsHand.style.transform = `rotate(${secondsDegrees}deg)`;
const hoursDegrees = (hours / 12) * 360 + (minutes / 60) * 30 + 90;
hoursHand.style.transform = `rotate(${hoursDegrees}deg)`;
const minutesDegrees = (minutes / 60) * 360 + (seconds / 60) * 6 + 90;
minutesHand.style.transform = `rotate(${minutesDegrees}deg)`;

4. setInterval을 활용한 함수의 주기적 실행

👉 현재 시간에 따라 침이 변화해야 하는데 setInterval( ) 을 추가하지 않을 시 위의 setDate( ) 함수는 한번밖에 실행되지 않아 시계가 멈춰있게 된다.

setInterval()

👉 일정한 시간 간격을 기준으로 특정 코드블록을 반복 실행할 수 있도록 하는 함수

setInterval(실행할 함수 이름, 시간 간격 기준)

단, 시간 간격은 ms가 기본 단위이다 (1000에 1초)

setInterval(setDate, 1000);
//1초에 한번씩 setDate함수를 실행하겠다는 뜻

---

최종 완성 코드

const hoursHand = document.querySelector('.hour-hand');
const minutesHand = document.querySelector('.min-hand');
const secondsHand = document.querySelector('.second-hand');

function setDate() {
  const now = new Date();
  const hours = now.getHours();
  const minutes = now.getMinutes();
  const seconds = now.getSeconds();
  const secondsDegrees = (seconds / 60) * 360 + 90;
  secondsHand.style.transform = `rotate(${secondsDegrees}deg)`;
  const hoursDegrees = (hours / 12) * 360 + (minutes / 60) * 30 + 90;
  hoursHand.style.transform = `rotate(${hoursDegrees}deg)`;
  const minutesDegrees = (minutes / 60) * 360 + (seconds / 60) * 6 + 90;
  minutesHand.style.transform = `rotate(${minutesDegrees}deg)`;
}

setInterval(setDate, 1000);