[JavaScript] 시계 만들기(setInterval, Date, padStart)

 

<!-- html -->
<h2 id="clock">00:00:00</h2>

 

// javascript
const clock = document.querySelector('h2#clock');

 

 

setInterval, setTimeout 활용해서 시계 만들기를 해보자

[JavaScript] setInterval, setTimeout 공부(2)

그전에 js에 있는 date 객체를 활용해 현재 시각을 가져올 수 있다

const today = new Date();
console.log(today.getFullYear());	//2023
console.log(today.getMonth());		//05
console.log(today.getDate());		//08
console.log(today.getDay());		//0:일~6:토
console.log(today.getHours());
console.log(today.getMinutes());
console.log(today.getSeconds());

 

매 초마다 시각을 가져올 수 있도록 하기 위해 setInterval를 활용해야함을 알 수 있다!

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

setInterval(getClock, 1000);

매 초마다 새로운 Date object를 만들고 있는 것이다

 

 

 

but, website를 새로고침하면 1초 후에야 다시 실행됨을 알 수 있다

website가 load되자마자 getClock()을 실행하고 싶다면?

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

getClock();						//여기!
setInterval(getClock, 1000);

당장 함수를 실행하고 시간 간격으로 다시 setInterval 되게 하면 된다

 

 

 

 

(+추가)

new Date().get()을 통해 생성되는 시각의 모습은 한 자리 숫자일 때 '05'가 아닌 '5'로 나타난다

이를 두 자리로 바꾸고 싶다면?

string을 두 문자로 채우고 싶다
= string이 언제나 최소한 두 문자를 갖도록 하고 싶다

 

padStart, padEnd

'hello'.padStart(7,'x');
// xxhello
'hello'.padEnd(7,'x');
//helloxx

⚠️ string에 대해서만 가능하다!

그러나 new Date()를 통해 가져오는 현재 시각은 string이 아닌 number

=> number를 string으로 만든 후 padStart/padEnd를 진행

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);

See the Pen clock by Kyoungeun Jo (Joe) (@Kyoungeun-Jo-Joe) on CodePen.

 

완성~~