7월22일46일차 - js로 시계 구현

date 내장함수를 이용해 현재 시간을 출력할 수 있습니다.
toLocaleString() 함수는 위치한 지역의 시간대로 출력합니다.
    <div class="date"></div>
    <script>
      const DATE = document.querySelector(".date");
      const 날짜 = new Date();
      const 요일 = ["일", "월", "화", "수", "목", "금", "토"];

      DATE.innerHTML += 날짜.toLocaleString() + " 년. 월. 일. 시간<br/>"; // 년. 월. 일. 시간
      DATE.innerHTML += 날짜.toLocaleDateString() + " 년. 월. 일.<br/>"; // 년. 월. 일.
      DATE.innerHTML += 날짜.getFullYear() + "년.<br/>"; // 년.
      DATE.innerHTML += 날짜.getMonth() + 1 + "월.<br/>"; // 월.
      DATE.innerHTML += 날짜.getDate() + "일.<br/>"; // 일.
      DATE.innerHTML += 날짜.getHours() + "시.<br/>"; // 시.
      DATE.innerHTML += 날짜.getMinutes() + "분.<br/>"; // 분.
      DATE.innerHTML += 날짜.getSeconds() + "초.<br/>"; // 초.
      DATE.innerHTML += 요일[날짜.getDay()] + "요일.<br/>"; // 요일.
    </script>
    
    
date함수를 이용해서 시계를 만듭니다.
transition을 적용하면 59초에서 0초로 바뀔 때 시계 바늘의 각도가

356deg > 0deg 로 변하기 때문에 시계 바늘이 반대로 회전하게 됩니다.

 

각도를 초기화하지 않고 쌓아주도록 합니다.

      const week = ["일", "월", "화", "수", "목", "금", "토"];

      let h = new Date().getHours();

      let hDeg = h * (360 / 12);

      let m = new Date().getMinutes();

      let mDeg = m * (360 / 60);

      let s = new Date().getSeconds();

      let sDeg = s * (360 / 60);

      const hour = () => {

        hourElement.style.transform = `translateX(-50%) rotate(${hDeg}deg)`;

        hDeg += 30;

      };

      hour();

      setInterval(hour, 1000 * 60 * (60 - m));

      const minute = () => {

        minuteElement.style.transform = `translateX(-50%) rotate(${mDeg}deg)`;

        mDeg += 6;

      };

      minute();

      setInterval(minute, 1000 * (60 - s));

      const second = () => {

        secondElement.style.transform = `translateX(-50%) rotate(${sDeg}deg)`;

        sDeg += 6;

      };

      second();

      setInterval(second, 1000);

시간에 따른 시침의 사이각은 30도(360/12)이므로 움직임이 1시간에 1번만 30도를 움직이므로 그 모습이 어색합니다.

이를 1분마다 움직이도록 하거나, 매 초 1/3600도를 이동하도록 하면 시침을 자연스럽게 움직일 수 있도록 할 수 있을 듯 합니다.