02 - JS and CSS Clock (Javascript 30)

원문 코드는 아래로 들어가시면 있습니다.

필요하신분들은 클론해서 쓰시면 됩니다.

출처 : https://github.com/wesbos/JavaScript30/tree/master/02%20-%20JS%20and%20CSS%20Clock

wesbos/JavaScript30

Javascript30의 두 번째 프로젝트는 js와 css로 시계 만들기입니다.

트랜지션에 대해 잘 몰라 다음의 블로그를 참고하였습니다.

출처 : https://takeuu.tistory.com/42

2. CSS + JS Clock

우선 index-START.html 파일을 열어 아래와 같이 수정합니다.

.hand {
      width: 50%;
      height: 6px;
      background: black;
      position: absolute;
      top: 50%;
      transform-origin: 100%; /* 변형 효과를 줄 때 원점을 지정해준다. 기준점을 오른쪽 으로 잡음. */
      transform: rotate(90deg); /* 원점으로부터 회전 각도를 설정할 때 사용. 침이 12시 방향에 가도록 설정. */
      transition: all 0.05s; /* 트랜지션시 애니메이션 속도 조절. 모든 트랜지션을 0.05초에 실행 완료 하겠다. */
      transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
      /* transition-timing-function은 트랜지션 효과가 진행하는 동안의 변화를 지정합니다. */
      /* cubic-bezier는 전환 시작과 끝까지의 속도를 제어하는데 사용됩니다. */
}

 

이제 브라우저로 파일을 열어 실행해보면 시, 분, 초 침이 12시 방향에 있는 모습을 볼 수 있습니다.

이제 자바스크립트 부분을 알아보겠습니다.

let secondHand = document.querySelector('.second-hand');
let minutesHand = document.querySelector('.min-hand');
let hourHand = document.querySelector('.hour-hand');

위와 같이 각 침의 element를 변수로 저장합니다.

 

이제 시간을 설정하는 함수를 만들어 보겠습니다.

먼저 아래와 같이 작성해봅니다.

let secondHand = document.querySelector('.second-hand');
let minutesHand = document.querySelector('.min-hand');
let hourHand = document.querySelector('.hour-hand');

let setDate = () => {
  let now = new Date();  // 현재 시간을 가져옵니다.

  let seconds = now.getSeconds();  // 현재 시간 중 초을 가져옵니다.

  let minutes = now.getMinutes();  // 현재 시간 중 분을 가져옵니다.

  let hour = now.getHours();  // 현재 시간 중 시간을 가져옵니다.

  console.log(hour, minutes, seconds);  // 콘솔창에 시, 분, 초를 찍어봅니다.
};

setDate();

이제 콘솔창을 확인해보면 시, 분, 초 가 찍히는것을 볼 수 있습니다.

 

자 이제 각각의 침을 이동을 시켜봅시다.

let secondHand = document.querySelector('.second-hand');
let minutesHand = document.querySelector('.min-hand');
let hourHand = document.querySelector('.hour-hand');

let setDate = () => {
  let now = new Date();  // 현재 시간을 가져옵니다.

  let seconds = now.getSeconds();  // 현재 시간 중 초을 가져옵니다.
  let secondsDegrees = ((seconds / 60) * 360) + 90;
  secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

  let minutes = now.getMinutes();  // 현재 시간 중 분을 가져옵니다.
  let minutesDegrees = ((minutes / 60) * 360) + 90;
  minutesHand.style.transform = `rotate(${minutesDegrees}deg)`;

  let hour = now.getHours();  // 현재 시간 중 시간을 가져옵니다.
  let hourDegrees = (((hour / 12) * 360) % 360) + 90;  // 시계를 24시간이 아닌 12시간으로 표시
  hourHand.style.transform = `rotate(${hourDegrees}deg)`;
};

setInterval(setDate, 1000);
setDate();

위의 코드를 입력한뒤 브라우저로 실행하면 움직이는 시계를 볼 수 있습니다.

원본 코드와는 조금 다른데 저는 분, 시를 계산할때 조금씩 움직이는것은 계산하지 않았습니다.