[JavaScript30/Day-2] JS and CSS Clock

HOW?

1. 시침, 분침, 초침 element 받아오기
2. 현재 시간, 분, 초 받아오기
3. 2를 1초에 한 번씩 update
4. update 할 때마다 1번에서 받아온 각 element를 update

Solution

  <script>
    // 시침
    const hourHand = document.querySelector('.hour-hand');
    // 분침
    const minHand = document.querySelector('.min-hand');
    // 초침
    const secondHand = document.querySelector('.second-hand');

    function setTime(){
      const day = new Date();

      /**
       * 시침 각도 구하기
       * 현재 받아온 시간이 7시라 가정했을때, 시계 한바퀴는 12시간이므로 7/12 (hour/12)
       * 여기에 시계 한바퀴의 각도인 360을 곱해주면 210 : 즉 12시 기준으로 210도 만큼 돌아야한다.
       * 근데 시침의 첫 시작점이 12시가 아닌 9시이므로 90도를 더해준다
      */
      const hour = day.getHours();
      const hourDeg = ((hour/12)*360) + 90;
      hourHand.style.transform = `rotate(${hourDeg}deg)`;
      hourHand.style.backgroundColor = `red`; // 시침 구분을 위해 스타일 변경!

      const min = day.getMinutes();
      const minsDeg = ((min/60) * 360) + 90; 
      minHand.style.transform = `rotate(${minsDeg}deg)`;
      minHand.style.backgroundColor = `black`; 

      const seconds = day.getSeconds();
      const secondsDeg = ((seconds/60) * 360) + 90; 
      secondHand.style.transform = `rotate(${secondsDeg}deg)`;
      secondHand.style.backgroundColor = `yellow`; 

      console.log(`${hour} : ${min} : ${seconds}`);
    }

    setInterval(setTime, 1000);

  </script>

 

TIL (Today I Llearned🎉)

• CSS에서 transform-origin 속성
  transform-origin : 100%를 사용하면 중심축이 우하단으로 변경되고 이를 기점으로 rotate 된다
  transform-origin : 50% 50% 이면 중심축이 element의 중심부를 기점으로 rotate
• CSS에서 transform : rotate(${각도}deg);