자바스크립트로 만드는 디데이 카운트다운 페이지 만들기

어린이날을 기준으로 카운트다운 웹페이지를 만들어봤어요!

 

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

function getClock() {
  const dday = new Date("December 25, 22 00:00:00").getTime();
  const today = new Date().getTime();
  const gap = dday - today;
  console.log(gap);
  const day = Math.floor(gap / (1000 * 60 * 60 * 24));
  const hour = String(Math.floor((gap / (1000 * 60 * 60)) % 24)).padStart(
    2,
    "0");
  const min = String(Math.floor((gap / (1000 * 60)) % 60)).padStart(2, "0");
  const sec = String(Math.floor((gap / 1000) % 60)).padStart(2, "0");
  clockTitle.innerText =
    day + "d " + `${hour}` + "h " + `${min}` + "m " + `${sec}` + "s ";
}

getClock();
setInterval(getClock, 1000);

 

https://codesandbox.io/embed/a08blueprint-forked-i3dzq3?fontsize=14&hidenavigation=1&theme=dark 

a08Blueprint (forked) - CodeSandbox

 

 

---

 

❗️궁금한점❗️

 

나는 hour, min, sec 으로 풀었는데 hour2, min2, sec2로 푼 분의 글을 봤다. 

출력되는 값은 모두 같게 나왔는데, 어떤 점이 다른지 모르겠다...

계속 공부하면서 알게 되면 블로그에 업데이트 하겠습니다! 

 

const hour = String(Math.floor(gap / (1000 * 60 * 60) % 24));
const hour2 = String(Math.floor(gap % (1000 * 60 * 60 * 24) / (1000 * 60 * 60)));

 

const min = String(Math.floor(gap / (1000 * 60) % 60));
const min2= String(Math.floor((gap%(1000 * 60 * 60))/(1000*60)));

 

const sec = String(Math.floor(gap / 1000 % 60));
const sec2= String(Math.floor((gap%(1000*60))/1000));

 

 

혹시 아시는 분 계시면 지나가다가 댓글 부탁합니다.