📌 KEY POINT
💚 new Date() 생성자 함수와 .getHours() 등 시간관련 메서드를 활용하여 시계 셋팅
💚 setInterval() 함수를 통해 1초마다 시간이 흐르는 동작 셋팅
👉🏻 마크업은 이렇게! (HTML5)
🩵 디지털 시계를 노출시킬 요소 생성 후, 00:00:00 (시:분:초) 단위를 맞춰 셋팅한다.
<body>
<h2 id="clock">00:00:00</h2>
</body>👉🏻 스크립트는 이렇게! (JS ES6)
🩵 new Date() : 오늘의 날짜를 불러오는 생성자 함수 호출
🩵 .getHours() : 시간을 반환하는 메서드
🩵 .getMinutes() : 분을 반환하는 메서드
🩵 .getSeconds() : 초를 반환하는 메서드
🩵 .padStart(길이, 추가할 문자) : 문자열의 길이를 지정하고, 부족한 부분을 앞쪽에서부터 지정한 문자로 채운다.
🩵 .padEnd(길이, 추가할 문자) : 문자열의 길이를 지정하고, 부족한 부분을 뒤쪽에서부터 지정한 문자로 채운다.
🩵 이렇게 시, 분, 초 데이터를 각 변수에 담은 후, 백틱 기호를 사용한 데이터 보간처리를 하여 innerText로 화면에 출력
🩵 setInterval(실행 함수, intervalTime) : 일정 시간마다 함수를 무한 반복 실행
🔹 1초동안 시간이 바뀌어야하기 때문에 intervalTime을 1000ms로 설정
<script>
const clock = document.querySelector("#clock");
function getClock(){
const date = new Date();
const hours = String(date.getHours()).padStart(2,"0");
const minutes = String(date.getMinutes()).padStart(2,"0");
const seconds = String(date.getSeconds()).padStart(2,"0");
clock.innerText = `${hours}:${minutes}:${seconds}`
}
getClock(); // 페이지가 로드되었을 때 바로 현재 시간을 표시하기 위해서 미리 로드!!
setInterval(getClock, 1000);
</script>👩🏻💻 : 디지털시계 이렇게 쉽게 만드는 것이었다니! 다음엔 D-day 기능 만들어봐야지!!
퍼블리셔 / 작업 기로끄v