[바닐라 js 챌린지] 5.0강 setInterval(), setTimeout(), .padStart()✨

5.0 
setInterval과 setTimeout 에 대해서 본격적으로 배운다.

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

function sayHello(){
	console.log("Hello");
    }
    
    setInterval(sayHello, 1000);  // 1초마다 sayHello가 반복

setInterval

:  원하는 코드를 바로 실행하지 않고 지정한 시간마다 반복적으로 실행하는 함수

시간은 밀리초 (ms) 단위를 사용한다. 

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

function sayHello(){
	console.log("Hello");
    }
    
    setTimeout(sayHello, 1000);  // 1초마다 sayHello가 반복

setTimeout

: 원하는 코드를 지정한 시간에 한번만 실행하고 멈추는 함수 

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

function sayHello(){
	console.log("Hello");
    }
    
    setTimeout(sayHello, 1000);  // 1초 후 sayHello () 실행

setTimeout은 한번만 실행되기때문에 시계를 만들거나 할때는 setInterval을 사용한다 !

시계 만들기 ⏰

 이제 본격적으로 시계를 만들어보겠다 .

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

function getClock(){
  const date = new Date();
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();

  clock.innerText = `${hours}: ${minutes} : ${seconds}`;
}

getClock();
setInterval(getClock, 1000);

생각보다 간단하게 만들 수 있다 ! 하지만 문제가 발생한다 ..

위의 그림처럼 19시 20분 3초라고 뜬다는 점 .. !

3초보다는 03초가 눈에 더 편하기 때문이다. 3앞에 0을 붙힐 수 있는 방법은 없을까 ?

.padStart()

그럴땐 padStart를 사용하면 된다.

"1".padStart(2,"0");  // 글자수가 두자리가 안될경우 뒤에 "0"을 붙임 --> 01

최대글자수를 인수로 받아서 원하는 문자를 붙여준다. 글자를 뒤에 붙여주는 padEnd도 있다

"1".padEnd(2,"0"); // 10

대신 padStart를 사용하려면 number -> text로 변환해야한다 !!

이 개념을 이용해서 조금 더 완벽한 시계를 만들어보자⏰

const clock = document.querySeletor("#colck");

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}h ${minutes}m ${seconds}s`;
   }
   
   getClock();
   setInterval(getClock, 1000);

text로 만들기 위해서 String()로 감싸준 후  , padStart()를 사용해주면된다.

결과물 두둥

이렇게 0이 붙어있는걸 볼 수 있다.

한자리 수인 0부터 9까지는 모두 0이 붙어서 출력 될 것이다 

5강은 이렇게 끝 ✨

다음에는 디데이를 만드는 코드를 기록해야지 !