날짜, countdown 만들기

gicomong·2021년 5월 6일
5

css animation

목록 보기
16/21
post-thumbnail

날짜 카운트다운을 만들어보자!

와 벌써 2021의 상반기가 끝나가는 가운데, 갑자기 2022년은 얼마나 남았나하는 생각이 들었습니다. 그래서! 이번에는 2022년이 얼마나 남았나~ 카운터다운을 하는 코드를 짜보고자 합니다 :)


미리보기

!codepen[kumjungmin/embed/JjWjPyL?height=429&theme-id=dark&default-tab=js,result]


코드 분석하기

html

  • html 구조는 아래 사진과 같다.

  • counterdown-container에 시간과 관련된 time-wrap를 자식으로 둔다.
  • time-wrap안에 big-text, time-label을 자식으로 둔다.
<title>Countdown timer</title>
<h1 class="title">New Years <br/> Countdown</h1>
<div class="line"></div>
<div class="countdown-container">
  <div class="time-wrap">
    <p class="big-text" id="days">0</p>
    <span class="time-label">days</span>
  </div>
   <div class="time-wrap">
    <p class="big-text" id="hours">0</p>
    <span class="time-label">hours</span>
  </div>
   <div class="time-wrap">
    <p class="big-text" id="mins">0</p>
    <span class="time-label">mins</span>
  </div>
   <div class="time-wrap">
    <p class="big-text" id="seconds">0</p>
    <span class="time-label">seconds</span>
  </div>
</div>



scss

[1] box-sizing은 박스의 크기를 결정할 때 사용한다.
box-sizingborder-box로 지정하면, 박스크기가 border를 기준으로 결정된다.

* {
  box-sizing: border-box;    //[1]
  font-family: 'Orbitron', sans-serif;
  color: #333333;
}

[2] 내부 콘텐츠를 수직, 수평 정렬하기 위해 display: flex를 설정한다.
[3] flex-directioncolumn로 하여 세로 정렬한다.
[4] justify-content: center를 하여 아이템들을 수평 중앙 정렬한다.
[5] align-items:center를 하여 수직 중앙 정렬을 한다.

.countdown-container {
  width: 50rem;
  min-height: 5rem;
  display: flex;           //[2]
  justify-content: center; //[3]
  align-items: center;     //[4]
  text-align: center;      //[5]
}



js

[1] new Date(시간)을 이용하여 2022년 1월 1일을 milliseconds로 환산환다.
[2] new Date()에 인자를 넘기지 않으면 현재시각을 milliseconds로 환산한다.
[3] 현재시각에서 2022년 1월 1일이 얼마나 남았는지 밀리초로 계산한다.
[3] 계산 후 1000을 곱하여 밀리초를 => 초로 변경한다.
[4] 이 초를 이용해 몇 날, 몇시, 몇분, 몇초나 남았는지 계산한다.

|단위|환산법|
|---|---|
|초| (밀리초 / 1000) % 60 |
|분| (밀리초 / 1000 / 60) % 60 |
|시| (밀리초 / 1000 / 60 / 60 ) % 24 |
|날| (밀리초 / 1000 / 60 / 60 / 24 ) % 24 |

const newYear = '1 Jan 2022';

function countdown() {
  const newYearsDate = new Date(newYear);   //[1]
  const currentDate = new Date();           //[2]
  
  const totalSecond = (newYearsDate - currentDate) / 1000;   //[3]
  const days = Math.floor(totalSecond / 3600 / 24);   //[4]
  const hours = Math.floor(totalSecond / 3600) % 24;  //[4]
  const minute = Math.floor(totalSecond / 60) % 60;   //[4]
  const seconds =  Math.floor(totalSecond) % 60;      //[4]
}

[6] document.getElementById(id값)을 사용해 dom을 가져온다.
[7] 그리고 계산 결과를innerText를 사용해 dom에 넣는다.
[8] setInterval(function, time)로 함수를 1000밀리초 간격으로 실행시킨다.

//[6]
const dayEl = document.getElementById('days');
const hoursEl = document.getElementById('hours');
const minsEl = document.getElementById('mins');
const secondsEl = document.getElementById('seconds');


function countdown() {
   ...
  dayEl.innerText = days;   //[7]
  hoursEl.innerText = hours;
  minsEl.innerText = minute;
  secondsEl.innerText = seconds;
}

setInterval(countdown, 1000);  //[8]
profile
⚠ 이 블로거는 퇴근 후 극심한 피로감 + 강렬한 휴식 욕구로 인해 일주일 이상 포스팅이 없을 수 있습니다. 하지만 항상 좋은 내용을 담고자 합니다🙇🏼

관심 있을 만한 포스트

0개의 댓글