[바닐라 JS] setInterval(), padStart(), 시계만들기

setInterval()

특정 시간마다 한번씩 일어나야 하는 작업이나 상황을 나타낼때
한 함수를 특정시간마다 실행 가능하다.
setInterval( , )

첫번째 인수는 실행하고자 하는 function,
두번째 인수는 호출되는 fuction을 몇 ms(milliseconds)로 할지를 쓰면된다.

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

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

setInterval(sayHello, 5000);

이렇게 쓰면 sayHello라는 함수가 5초마다 한번씩 실행된다.
매초 실행해야하는 함수를 쓰면 좋다.

setTimeout()

타이머가 만료된 뒤 함수나 코드를 실행한다.
위에서 본 setInterval은 정해진 delay마다 반복실행하는 것이고
setTimeout은 정해진 delay후 한번 실행하는 것이다.

마찬가지로
첫번째 인수는 실행하고자 하는 function
두번째 인수는 얼마나 기다릴지를 ms 단위로 넣어주면 된다.

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

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

setTimeout(sayHello, 5000);

padStart(), padEnd()

padStart와 padEnd는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환한다.
원래 가지고 있던 string을 보다 길게 만들 때 사용한다.
padStart는 왼쪽에 채워넣고, padEnd는 오른쪽에 채워넣는다.

"문자열".padStart(길이, "채울문자열")

"1".padStart(2,"0");

이런식으로 쓰면 된다.
만약 이미 문자열이 주어진 길이를 만족한다면 아무일도 일어나지 않는다.

시계만들기

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

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

Date.getHours()
Date.getMinutes()
Date.getSeconds()
를 통해 현재 시간, 분, 초 를 알 수 있다. 이를 활용하여 매초 업데이트 되는 시계를 만들 수 있다.

여기에 padStart()를 사용해서 1초를 01초로 나오도록 포매팅을 해준다.

⚠️ 위의 시간, 분, 초는 숫자로 반환되어 나타나므로 padStart()사용시 문자열로 변환해주어야 한다.
string()으로 감싸주면 변환 가능하다.

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

이렇게 시계가 잘 나온다 !!

reference

노마드코더

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date