[노마드 바닐라JS 챌린지] Day.10 Intervals

 

setInterval()와 setTimeout()  

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

function getClock(){
    const date = new Date();
    clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}
getClock();  //여기서 한번 실행시켜준 이유는? 
//setInterval 1초후 마다 실행 전까지는 00:00이기 때문에 브라우저 실행 시 바로 시간이 나타나도록 

setInterval(getClock, 1000);

 

padStart()와 padEnd()  

--> String 앞/뒤로 붙여주는 함수다.

padStart와 padEnd 함수는 ES8(ES2017)에 새롭게 추가된 기능이다.

숫자 앞에 0 붙이기  출처 이동

달력의 날짜를 표시 할때 01, 02 처럼 숫자 앞에 0을 붙여서 표현한다. padStart가 나오기 전에는 이러한 기능을 만들기 위해서 로직을 구현하였지만 이제는 간편하게 작업할 수 있다.

const number = 10;
const size = 4;
const result = String(number).padStrt(size, 0);

console.log(result);
// 0010

* number를 string으로 바꾸는 방법은 String() 안에 감싸는 방법이 있다.

 

---

과제 솔루션 - 크리스마스 까지 D-day 나타내기

const clockTitle = document.querySelector(".js-clock");

function getTime() {
  const xmasDay = new Date(`${new Date().getFullYear()}-12-25:00:00:00+0900`);
  const now = new Date();
  // This is in milisecondsx
  const difference = new Date(xmasDay - now);
  const secondsInMs = Math.floor(difference / 1000);
  const minutesInMs = Math.floor(secondsInMs / 60);
  const hoursInMs = Math.floor(minutesInMs / 60);
  const days = Math.floor(hoursInMs / 24);
  const seconds = secondsInMs % 60;
  const minutes = minutesInMs % 60;
  const hours = hoursInMs % 24;
  const daysStr = `${days < 10 ? `0${days}` : days}d`;
  const hoursStr = `${hours < 10 ? `0${hours}` : hours}h`;
  const minutesStr = `${minutes < 10 ? `0${minutes}` : minutes}m `;
  const secondsStr = `${seconds < 10 ? `0${seconds}` : seconds}s`;
  clockTitle.innerHTML = `${daysStr} ${hoursStr} ${minutesStr} ${secondsStr}`;
}

getTime();
setInterval(getTime, 1000);