2. JS and CSS Clock
1. 목표
현재 시간에 맞게 작동하는 시계를 만들자
2. 정리
1. 현재 시간 가져오기
const now = new Date();
const secnodDeg = (now.getSeconds() / 60) * 360 + 90;
new Date()
const now = new Date();
const secnodDeg = (now.getSeconds() / 60) * 360 + 90;
new Date()
현재 시간을 가져온다.
new Date().getSecond()
로 현재 초를 가져온다
이외에 시,분,요일,년도 등 가져올 수 있다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date
2. js에서 element에 style 지정하기
// 시침
const hourHand = document.querySelector(".hour-hand");
const hourDeg = (now.getHours() / 12) * 360 + 90;
hourHand.style.transform = `rotate(${hourDeg}deg)`;
element.style
해당 element의 css를 지정할 수 있다.
위는 hour-hand class에 해당하는 element에
transform: rotate(${hourDeg}deg)
를 추가했다.
백틱 기호(`)를 활용해서 js 상수값을 string에 넣어주었다.
3. 일정 시간마다 반복해서 함수 실행하기
setInterval(rotateHands, 1000);
setInterval
을 활용해 callback과 ms(시간)을 지정한다.
ms 마다 callback이 수행된다.
Author And Source
이 문제에 관하여(2. JS and CSS Clock), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yogjin/2.-JS-and-CSS-Clock저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)