[JS]2021-1114 Date - 자바스크립트로 현재 시간 불러오기/ setInterval(),setTimeout() - 타이머 함수

nomadcoders VanilaJS #5.0~3 강의를 정리한 내용입니다.

new Date()

new Date()를 호출하면, Date 객체를 불러온다. 이 함수를 인수 없이 호출하면 현재 날짜, 시간이 저장된 Date 객체를 반환한다.

function getTime() {
    const date = new Date(); 
    //new Date()는 Date 객체를 불러옴, 이 함수를 인수 없이 호출하면 현재 날짜 및 시간이 저장된 date 객체가 반환된다.

    clock.innerText =`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`; 
    //Date 객체의 여러 메소드를 활용해, 현재 시간 값을 얻어올 수 있음. 이를 innerText로 화면에 표시한다.
}

.getHours(), getMinutes(), getSeconds() 는 Date 객체에 저장된 현재 시간을 가져올 수 있는 메소드로, 여러 종류가 있다.

(참고자료)

Date 객체와 날짜

setInterval(), setTimeout

interval : 시간적 간격 - 즉 일정 간격을 두고 특정 함수가 재 실행 되도록 설정할 수 있다.

timeout : 지연 - 특정 함수가 실행되기 까지 일정 시간을 지연시킬 수 있다.

setInterval(실행시킬 함수, 시간 - ms 단위로)

//예제
setInterval(getTime, 1000); //매 1초마다 재실행되도록 인터벌을 설정
setTimeout(getTime, 5000); // 5초 뒤에 getTime 함수가 실행되도록 설정

시계를 호출하고 매 1초마다 새롭게 업데이트 되도록 하려면

getTime(); // 1초의 딜레이가 있기 때문에, 페이지를 로드하자마자 함수가 실행되도록 설정
setInterval(getTime, 1000); //그 뒤 매 1초마다 재 실행되어 시간이 업데이트 되도록 함

Output