[JavaScript30] Day2: JS and CSS Clock

 

 

[index.js]

const secondHand = document.querySelector('.clock-second');
const minsHand = document.querySelector('.clock-minute');
const hourHand = document.querySelector('.clock-hour');

function setDate() {
  const now = new Date();

  const seconds = now.getSeconds();
  const secondsDegrees = (seconds / 60) * 360 + 90;
  secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

  const mins = now.getMinutes();
  const minsDegrees = (mins / 60) * 360 + (seconds / 60) * 6 + 90;
  minsHand.style.transform = `rotate(${minsDegrees}deg)`;

  const hour = now.getHours();
  const hourDegrees = (hour / 12) * 360 + (mins / 60) * 30 + 90;
  hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}

setInterval(setDate, 1000);

setDate();

 

배운 점

1. DOM 요소 쿼리

const secondHand = document.querySelector('.clock-second');
const minsHand = document.querySelector('.clock-minute');
const hourHand = document.querySelector('.clock-hour');

코드의 이 부분은 .clock-second, .clock-minute, .clock-hour 클래스가 있는 세 개의 DOM 요소를 선택한다. 이는 각각 시계의 초침, 분침, 시침을 나타낸다.

 

2. setDate()

function setDate() {
  const now = new Date();

  const seconds = now.getSeconds();
  const secondsDegrees = (seconds / 60) * 360 + 90;
  secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

  const mins = now.getMinutes();
  const minsDegrees = (mins / 60) * 360 + (seconds / 60) * 6 + 90;
  minsHand.style.transform = `rotate(${minsDegrees}deg)`;

  const hour = now.getHours();
  const hourDegrees = (hour / 12) * 360 + (mins / 60) * 30 + 90;
  hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}

setDate()는 현재 시간을 기준으로 시계 바늘을 업데이트 하는 역할을 한다. 이를 사용하기 위해서 현재 날짜와 시간을 가져오는 Date()를 now라는 변수에 할당해주었다. 그런 다음 현재 초, 분, 시간이 Date 객체에서 추출된다. 이후 현재 시간을 기준으로 각 시계 바늘의 회전 각도를 결정하기 위해서 계산을 해준다. style.transform은 회전을 적용하기 위한 부분이다.

 

3. setInterval()

setInterval(setDate, 1000);

setDate();

setInterval(setDate, 1000)은 setDate 함수에 대한 반복 호출을 1000밀리초(1초)마다 설정하여 매초 시계를 업데이트 한다. 마지막에 setDate()를 처음에 호출해준 이유는 시계 바늘의 초기 상태를 설정하기 위해서이다.

 

 

처음 시작할 때는 간단할 것이라고 생각했지만, 시계바늘의 회전 부분이 너무 복잡하고 생소한 부분이었다. 2일차에서 공부할 것이 많이 보여서 더욱 열심히 해야 겠다고 생각했다.