[책] 자바스크립트 코드 레시피 278 - 79일차

아날로그 시간 표시하기

• 아날로그 형식의 시계를 표시하고 싶을 때

실습

index.html

<div class="clock">
  <div class="lineHour"></div>
  <div class="lineMin"></div>
  <div class="lineSec"></div>
</div>

style.css

@charset "UTF-8";

.clock {
  position: relative;
  border-radius: 50%;
  border: 3px solid #000;
  width: 500px;
  height: 500px;
  background-color: rgba(255, 255, 255, 0.1);
}
.lineHour {
  width: 10px;
  height: 150px;
  background-color: #000;
  position: absolute;
  top: calc(50% - 150px);
  left: calc(50% - 5px);
  transform-origin: bottom;
}
.lineMin {
  width: 4px;
  height: 200px;
  background-color: #000;
  position: absolute;
  top: calc(50% - 200px);
  left: calc(50% - 2px);
  transform-origin: bottom;
}
.lineSec {
  width: 2px;
  height: 200px;
  background-color: #000;
  position: absolute;
  top: calc(50% - 200px);
  left: calc(50% - 1px);
  transform-origin: bottom;
}

script.js

window.onload = function() {

  setInterval(() => {
    const now = new Date(); // 현재 시간 가져오기

    // hours, minutes, seconds 시간을 단위로 추출
    const hours = now.getHours(); // 시간 (0 ~ 23)
    const minutes = now.getMinutes(); // 분 (0 ~ 59)
    const seconds = now.getSeconds(); // 시간 (0 ~ 59)

    // 시계 바늘의 각도 반영
    const degH = hours * (360 / 12) + minutes * (360 / 12 / 60); // 시침은 시와 함께 분의 각도도 고려
    const degM = minutes * (360 / 60); // 분침
    const degS = seconds * (360 / 60); // 초침

    const elementHours = document.querySelector('.lineHour');
    const elementMinutes = document.querySelector('.lineMin');
    const elementSeconds = document.querySelector('.lineSec');

    elementHours.style.transform = `rotate(${degH}deg)`;
    elementMinutes.style.transform = `rotate(${degM}deg)`;
    elementSeconds.style.transform = `rotate(${degS}deg)`;
  }, 50);

}