노마더코더 크롬 앱 만들기 : Clock

시계 만들기

html

<h2 id="clock">00:00:00</h2>

JS

const clock = document.querySelector("h2#clock");

function getClock() {
    const date = new Date(); //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);

배운것들

• setInterval 함수는 정해진 시간을 주기로 반복적으로 실행

setInterval(getClock, 1000); // getClock 함수를 1초마다 반복 실행

• Date() 객체는 현재 시간 날짜를 불러온다. get은 받아고 set은 변경은 값을 받아옴
• padStart는 주어진 길이를 만족하는 새로운 문자열을 반환한다.

date.getHours()).padStart(2,"0"); //길이 2에 빈공간은 0으로 채움

• padStart 함수와 padEnd 함수는 문자열에만 적용할 수 있음 그래서 앞에 String 추가함으로써 날짜 출력을 문자열로 변환 하였다.