[JS] Analog Clock

1. style setting

 

시계 첫 setting은 이러하다

 

<div class="clock">
  <div class="clock-face">
    <div class="hand hour-hand"></div>
    <div class="hand min-hand"></div>
    <div class="hand second-hand"></div>
  </div>
</div>

시침, 분침, 초침은 각각 hour-hand, min-hand, second-hand라는 class name을 가지고 있다.

 

.hand {
  width: 50%;
  height: 5px;
  background: black;
  position: absolute;
  top: 50%;
}

해당 hand들의 css 코드는 이렇게 되어 있다.

default 세팅을 하기 위해 transform: rotate(90deg)를 추가해보면

시계의 왼쪽부분에서 해당 hand들이 돌아가 있을 것이다.

우리가 원하는 것은 큰원(시계)의 중간에 초첨을 맞춘 후 돌아가는 것이므로

transform-origin: 100%를 추가해 준다.

시계의 움직임과 살짝 튕기는 애니매이션도 추가로 넣어준다.

.hand {
  width: 50%;
  height: 5px;
  background: black;
  position: absolute;
  top: 50%;
  transform-origin: 100%;
  transform: rotate(90deg);
  transition: all 0.05s;
  transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
.min-hand {
  width: 45%;
  margin-left: 5%;
}
.hour-hand {
  width: 40%;
  margin-left: 10%;
}

분침과 시침은 조금 더 짧으므로 width와 margin-left로 길이와 방향을 맞춰준다.

 

---

2. JS handle Event

const secondHand = document.querySelector(".second-hand");
const minHand = document.querySelector(".min-hand");
const hourHand = document.querySelector(".hour-hand");

function setDate() {}

setInterval(setDate, 1000);

각각의 hand들을 variable로 받은 후

1초마다 setDate라는 이벤트를 실행시키도록 설정한다.

 

function setDate() {
  const date = new Date();
  const seconds = date.getSeconds();
  const secondsDegrees = ((seconds / 60) * 360) + 90;
  secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
}

Date class로 현재 시간을 받아온다.

초침은 60초 단위로 되어있으니 60으로 나눈 후 한바퀴인 360을 곱해준다.

여기서 원에 hand들의 각은 가로로 누워 있었으므로 90을 더해준다.

이렇게 해야 시침이 360도에 도달한 동시에 분침이 한 칸 움직이게 된다.

 

분침과 시침도 마찬가지로 구현해 준다.

function setClockDregrees(isHour, time) {
  const TWV = 12;
  const SITN = 60;
  if(isHour) {
    return ((time/TWV) * 360) + 90;
  } else {
    return ((time/SITN) * 360) + 90
  }
}
function setDate() {
  const date = new Date();
  const seconds = date.getSeconds();
  const secondsDegrees = setClockDregrees(false, seconds);
  secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

  const minutes = date.getMinutes();
  const minutesDegrees = setClockDregrees(false, minutes);
  minHand.style.transform = `rotate(${minutesDegrees}deg)`;

  const hours = date.getHours();
  const hoursDegrees = setClockDregrees(true, hours);
  hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
}

각을 구하는 식이 비슷해서 setClockDegrees라는 함수로 분리하였다.

 

이렇게 움직이는 아날로그 시계 완성!

 

https://github.com/eee0930/js_clock

GitHub - eee0930/js_clock: Web Analog Clock made with JS and CSS

---

출처

https://javascript30.com/

JavaScript 30