★최종 결과물
00
:
00
:
00
0. 작업 개요
카운트 다운 시계를 만들어보자.
1. 특정 시간만큼 1초마다 바뀌는 카운트 다운 시계.
2. 1초마다 현재시간에서 -1초씩 줄어들어야 함.
3. 0 이하로 안떨어지게 하기.
1. HTML
<div class="count_down_container">
<span class="hour">00</span>
<span>:</span>
<span class="min">00</span>
<span>:</span>
<span class="sec">00</span>
</div>
2. JS
간단하게, time 즉, 타이머가 작동될 시간(초)을 인자로 받는 함수를 만들어줄건데,
우선 document에서 미리 지정해준 시,분,초 DOM을 변수화 시킨 후,
timer라는 함수를 새로 지정해줄껀데, 이함수는 실질적으로 입력받은 초를 시/분/초로 변경 후,
입력받은 time을 1내려주는 기능을 하는 함수이다.
이때 time의 값이 0 이하라면 return 시켜주도록 한다.
그뒤, 1초마다 반복을 시켜줘야 하므로,
setInterval() 매서드로 timer함수를 1초 간격으로 실행시켜준다.
이렇게 하면 초기에는 00:00:00 이 노출되므로
setInterval()로 반복이 시작되기 전 미리 timer() 함수를 한번 실행시켜준다.
hour, min, sec의 값을 내림처리 후 9보다 작으면 앞자리에 0을 붙여주면서
01,02,03 ~.. 09 까지의 포맷을 맞춰준다.
const countDown = (time) => {
const hourEl = document.querySelector('.hour');
const minEl = document.querySelector('.min');
const secEl = document.querySelector('.sec');
const timer = () => {
if(time < 0) return;
let hour = time / 3600;
let min = (time % 3600) / 60;
let sec = (time % 3600) % 60;
hourEl.innerText = Math.floor(hour) > 9 ? Math.floor(hour) : `0${Math.floor(hour)}`;
minEl.innerText = Math.floor(min) > 9 ? Math.floor(min) : `0${Math.floor(min)}`;
secEl.innerText = sec > 9 ? sec : `0${sec}`;
time--;
}
timer();
setInterval(timer, 1000)
}
countDown(15);
