NomardCoder: clock-1

1.기본셋팅 확인

<h2 id="clock">00:00</h2>

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

2.setInterval(function, ms) = 매0초마다 무슨일이 일어나게 하고 싶을때

• 첫번째 인수: 실행하고자 하는 function
• 두번째 인수: 몇 m/s로 실행 할건지?
  
• setTimeout(function, ms) = setInterval과 같지만 한번만 실행됨

const clock = document.querySelector("#clock");
function sayHello() {
  console.log("hello");
}
setInterval(sayHello, 5000);

3.document의 시간 값 가져오기

const clock = document.querySelector("#clock");
function getClock() {
  const date = new Date();
  console.log(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`);
}
setInterval(getClock, 1000);

+ 페이지 새로고침하자마자 바로 보여지게 하고 싶으면 함수 바로 호출

getClock( )

4.padStart(채우고싶은글자수, “추가하고싶은 string”)

• 0을 00, 1을 01로 표기하고 싶을때
• padEnd는 뒤에 글자를 붙임

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}`;
}
getClock();
setInterval(getClock, 1000);

* .padStar 앞에는 string이 와야함으로 number인 getHours를 String( )으로 감싸줌