Analog Clock

30days30submits 중 To Create Analog Clock 강의를 보면서 정리한 글입니다.

▶코드 전체보기

1. 시침, 분침, 초침이 끝지점에서 rotate되기

.hour,
.min,
.sec {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 5px;
  width: 40%;
  background-color: rgb(0,0,0);
  border-radius: 50%;
}

작성된 코드에서 분침에만 .min {transform: rotate(-10deg);}를 준 결과 분침과 시침,초침이 아래와 같이 끝점이 아니라 중앙에서 만나는 것을 확인할 수 있습니다.

이를 수정하기 위해 시침,분침,초침 모두에게 transform-origin: left;을 주었습니다.

.hour,
.min,
.sec {
  transform-origin: left;
}

transform-origin이란?
transform-origin은 transform의 변형 기준점을 지정하는 속성입니다. 속성 값은 길이 단위 값과 키워드로 지정할 수 있으며, 배경 이미지의 위치를 지정하는 개념과 동일하게 사용합니다.

속성 값은 X, Y, Z축 방향으로 3개까지 입력할 수 있으며, 값이 1개 또는 2개일 경우에는 Z축 값이 0이 됩니다. 이때 값이 1개일 경우 X, Y축은 동일하게 적용되고 Z축 값은 0이 됩니다.

2. JavaScript구현

html

    <div class="clock">
      <div class="hour"></div>
      <div class="min"></div>
      <div class="sec"></div>
    </div>
  </section>

css기본 틀

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

section {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clock {
  position: relative;
  height: 400px;
  width: 90%;
  max-width: 400px;
  border-radius: 50%;
  border: 5px solid gray;
}

.hour,
.min,
.sec {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 5px;
  width: 40%;
  background-color: rgb(0,0,0);
  border-radius: 50%;
  transform-origin: left;
  transform: rotate(-90deg);
}

현재까지 작성된 틀을 기본으로 시침, 분침, 초침을 자바스크립트를 통해 동적으로 움직일 수 있도록 구현을 하게 됩니다.

2-1 new Date() 이용해 바늘 각도 얻기

생성자 Date

• 표준 Built-in 객체로써 날짜와 시간을 위한 속성값과 메서드를 제공하는 객체
• Date객체는 1970년 1월 1일 UT(협정 세계시) 자정과의 시간 차이를 밀리초로 나타내는 정수 값으로 표현
• new Date()는 Data객체 생성자로 인수 없이 호출하는 경우 현재 날짜와 시간이 저장된 객체를 생성합니다.
• 날짜 정보 얻기(시/분/초/ms): Date.getHours(), Date.getMinutes(), Data.getSeconds()

const minEl = document.querySelector('.min')
const secEl = document.querySelector('.sec')
const hourEl = document.querySelector('.hour')
const date = new Date;

const secDeg = data.getSeconds()/60 * 360 -90;
secEl.style.transform = `rotate(${secDeg}deg)`

secEl.style.transform = 'rotate(0deg)'를 확인해보면 실제로 초침이 15초에 머무르며 15초부터 시작되는 것을 확인할 수 있습니다. 시침이 1정각을 가르키기 위해서는 secEl.style.transform = 'rotate(-90deg)'를 해야합니다.

따라서 현재 각도를 구하기 위해서는 data.getSeconds()/60 * 360를 통해 구해낸 각도에서 -90을 더해야합니다.

2-2 setInterval함수

이렇게 구해낸 현재 각 바늘의 각도가 1초마다 동적으로 움직이도록 하기 위해 setInterval함수로 묶어줍니다.

setInterval(() => {
  const date = new Date;
  const secDeg = date.getSeconds() / 60 * 360 - 90;
  const minDeg = date.getMinutes() / 60 * 360 - 90;
  const hourDeg = date.getHours() / 12 * 360 - 90;

  secEl.style.transform = `rotate(${secDeg}deg)`
  minEl.style.transform = `rotate(${minDeg}deg)`
  hourEl.style.transform = `rotate(${hourDeg}deg)`
}, 1000)