02. CSS + JS Clock
프로젝트 소개
- 아날로그 시계(초, 분, 시침 포함)을 제작
코드 작성 순서
- 매초 현재 시, 분, 초 값을 가져오는 함수 실행
- 해당 시, 분, 초 값을 회전량으로 변환(360도)
- 해당 로테이션 값을 초, 분, 시침의 transform: rotate() 값에 넣어줌
@ 주의할 점: 각도 변환시 최초 -90도에서 시작하므로 +90을 하고, 시간은 12시간 기준으로 넘어가는 경우와 그렇지 않은 경우 나눠 삼항 조건 연산자 활용하면 편리
배운 것들
시간 관련 date() 속성
:오늘 날짜, 현재시간 등 날짜와 시간 관련 method는 'Date()' 내장 함수 참조
https://goddaehee.tistory.com/234
setInterval
: setInterval은 일정시간 간격으로 특정 함수를 주기적으로 호출하는 것이고, setTimeout은 일정 시간 후에 특정 함수를 1번 호출하는 것임. 따라서, setTimeout은 재귀함수 형식으로 사용해야 함.
https://offbyone.tistory.com/241
최종 코드
const secondHand = document.querySelector(".second-hand");
const minuteHand = document.querySelector(".min-hand");
const hourHand = document.querySelector(".hour-hand");
function clock() {
let now = new Date()
let second = now.getSeconds()
let minute = now.getMinutes()
let hour = now.getHours()
let rotateSecond = (second/60) * 360 + 90;
let rotateMinute = (minute/60) * 360 + 90;
let rotateHour = (hour > 12 ? ((hour-12)/12) * 360 + 90 : hour/12 * 360 + 90);
secondHand.style.transform = `rotate(${rotateSecond}deg)`
minuteHand.style.transform = `rotate(${rotateMinute}deg)`
hourHand.style.transform = `rotate(${rotateHour}deg)`
console.log(now);
console.log(rotateSecond, rotateMinute, rotateHour);
}
setInterval(clock, 1000);
느낀 점
- 분, 초와 달리 시간은 24시간 기준으로 데이터를 가져오지만, 실제 시계는 12시 기준으로 되어 있어서, 이에 대한 변형이 필요했음.
- 12보다 큰 경우는 12을 뺀 다음 시간에 대응하는 rotate 각도를 계산하는 식으로 삼중 조건 연산자를 활용하여 편리하게 변형했음.
Author And Source
이 문제에 관하여(02. CSS + JS Clock), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@mementomori/02.-CSS-JS-Clock저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)