바닐라JS - clock

Clock

1) setInterval

반복적으로 n초마다 함수를 실행시킴

setInterval(실행할 function, 호출되는 function 간격을 몇ms로 할 지);

ex)

function sayHello() {
    console.log("hello");
}

setInterval(sayhello, 5000); //5초마다 sayhello function 실행

2) setTimeout

n초 뒤에 함수를 실행시킴

setInterval(실행할 function, 얼마나 기다릴지 ms 단위로);

3) Date

const date = new Date() //오늘 날짜를 가져옴

date.getDate() //일
date.getDay() //요일
date.getFullYear() //년
date.getHours() //시
date.getMinutes() //분
date.getSeconds() //초

4) 현재 시각 보여주는 코드

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

function getClock() {
    const date = new Date();
    clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}

getClock();
setInterval(getClock, 1000);

5) 시각이 모두 두자리로 나오게 하는 코드

padStart 함수

string.padStart(원하는길이, 원하는길이가 아니라면 앞쪽에 채워줄 문자);

padEnd 함수

string.padEnd(원하는길이, 원하는길이가 아니라면 뒤쪽에 채워줄 문자);

두자리로 나오게 하는 코드

const clock = document.querySelector("h2#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);