[노마드코더] 바닐라 JS로 크롬 앱 만들기 #04 (clock)

• setIntervals :  '매 n초/분…마다' 무언가를 실행하고 싶을 때 사용
• setTimeout :  일정 시간 후에 실행하게 함
• new Date : 오늘 날짜 (getDate/Day/FullYear/Hours/Minutes/Second)
• padStart() : string에 쓰는 함수로 원하는 글자수를 만들 때 (앞부분에 string을 추가하여) 사용 ↔ padEnd()

"1".padStart(2,"0") // padStart(원하는글자수, "추가할 글자")
// 결과 "01"

시계만들기

const clock = document.querySelector("#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}`)
}
// padStart는 string에 쓰는 함수이기때문에 String으로 감싸 number > string 으로 바꿔줘야함

getClock()
setInterval(getClock, 1000);
// Interval이 1초뒤 시작되기때문에 새로고침 후 바로 보이게 하기 위해 즉시실행을 한번 시켜줌