[JS] 실습-AnalogClock

📌 아날로그 시계 구현

• 현재 시간을 표시하는 아날로그 시계를 구현한다.
• 아날로그 시계는 여러 개 즉, 재사용할 수 있어야한다.
  

내가 작성한 코드는 아래와 같다.

const SetClock = () => {

    let now = new Date();
    let nowHours = now.getHours() * 30;
    let nowMinutes = now.getMinutes() * 6;
    let nowSeconds = now.getSeconds() * 6;

    document.querySelectorAll(".hour").forEach(function (container) {
        container.style.cssText = `--deg: ${nowHours}`;
    });

    document.querySelectorAll(".minute").forEach(function (container) {
        container.style.cssText = `--deg: ${nowMinutes}`;
    });

    document.querySelectorAll(".second").forEach(function (container) {
        container.style.cssText = `--deg: ${nowSeconds}`;
    });
};

export default SetClock;

가장 먼저, Date Object를 가져와서 현재 시간, 분, 초를 계산한다.

let now = new Date();
let nowHours = now.getHours() * 30;
let nowMinutes = now.getMinutes() * 6;
let nowSeconds = now.getSeconds() * 6;

style.css파일을 살펴보면 시침, 분침, 초침의 각도를 표현하기 위해 css 변수를 사용하고 있는데, 이 변수의 값을 변경해서 시침, 분침, 초침의 각도를 변경해준다.

.analog-clock > .hand {
  --deg: 0;
  position: absolute;
  bottom: 50%;
  left: 50%;
  border: 1px solid white;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transform-origin: bottom;
  transform: translate3D(-50%, 0, 0) rotate(calc(var(--deg) * 1deg));
  z-index: 10;
}

그리고 App.js 파일에서 analog-clock을 가져오고 setInterval함수를 사용해서 1초마다 한번씩 SetClock함수를 호출해주었다.

import AnalogClock from './AnalogClock.js';
import SetClock from "./SetClock.js";
document.querySelectorAll('.analog-clock').forEach(AnalogClock);
setInterval(() => {
	SetClock();
}, 1000);
SetClock();

Github Repository 이동