[JS30] -29) Countdown Clock
버튼을 누르거나 시간을 입력했을 때 화면에 띄우기
const $timerDisplay = document.querySelector('.display__time-left');
const $customForm = document.querySelector('#custom');
const $customTimeInput = document.querySelector('input[name="minutes"]');
const $timerButtons = document.querySelectorAll('.timer__button');
$customForm.addEventListener('submit', handleCustomTimeInput)
$timerButtons.forEach(($timerButton) => {
$timerButton.addEventListener('click',() => displayCountdown(
$timerButton.dataset.time
))
})
function handleCustomTimeInput(e) {
e.preventDefault();
displayCountdown($customTimeInput.value);
}
function displayCountdown(seconds) {
const min = Math.floor(seconds / 60);
const secondsLeft = seconds % 60;
$timerDisplay.textContent = `${min} : ${secondsLeft}`;
}
시간 계산하기
어떤 다른 방법으로 일정한 타이머를 구현할 수 있을까?
타이머 만들기
function timer(seconds) {
const now = Date.now();
const then = now + seconds * 1000;
setInterval(() => {
const secondsLeft = Math.round((then - Date.now()) / 1000);
console.log(secondsLeft);
}, 1000);
seconds를 넣으면, 현재 시각에서 넣은 seconds를 더한다.
그 뒤 현재시각을 1초마다 받아와 빼준다.
헷갈린다면 아래 그림을 참고하자.
그냥 1초마다 지정한 시간에서 1초씩 빼면 되는 거 아니야?
굳이 이렇게 번거롭게 하는 이유가 있다.
브라우저가 버벅이거나 맥에서 스크롤하는 등의 특정 상황에서 setInterval함수가 원활히 작동하지 않을 수 있다. 그런 경우에도 계속해서 현재시간을 받아와 빼준다면 금방 정상화되기 때문에, 위와 같이 하는 것이다.
setInterval함수는 가끔 요상하게 움직이기 때문에.....알아두면 좋은 트릭이다.
clearInterval로 타이머 초기화
다른 버튼을 눌렀을 때 setInterval함수가 겹치지 않아야 하기 때문에, 함수가 실행되었더라도 초기화할 수 있도록 가장 처음에 clearInterval을 해준다. 타이머를 선언한 이전에 clearInterval을 해주어야 하기 때문에 미리 let으로 최상단에 선언해준다음 할당해주었다.
맨 처음 자바스크립트로 게임을 만들 때가 떠올랐다...그 때 setInterval을 처음 다루면서 두 개의 함수가 겹치거나 clearInterval을 제대로 못 써서 곤란했었는데, 함수 처음에 clearInterval로 초기화 해주는 건 아주 좋은 방법인 것 같다. 기억하자!
let countdown;
function timer(seconds) {
clearInterval(countdown);
const now = Date.now();
const then = now + seconds * 1000;
countdown = setInterval(() => {
const secondsLeft = Math.round((then - Date.now()) / 1000);
displayCountdown(secondsLeft)
if(secondsLeft <= 0) clearInterval(countdown);
}, 1000)
}
한 자리 수 앞에 0붙이기
너무 멋이 없다.
한 자리 수 일때는 앞에 0을 붙여주자.
됐다!
카운트 다운 종료 시점 표시하기
function displayEndTime(time) {
const date = new Date(time);
const hour = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
$endTime.textContent = `${hour}시 ${minutes}분 ${seconds}초에 종료됩니다`
}
function timer(seconds) {
clearInterval(countdown);
const now = Date.now();
const then = now + seconds * 1000;
displayEndTime(then);//
countdown = setInterval(() => {
const secondsLeft = Math.round((then - Date.now()) / 1000);
displayCountdown(secondsLeft)
console.log(secondsLeft)
if(secondsLeft <= 0) clearInterval(countdown);
}, 1000)
}
맨 처음 카운트 다운할 시간을 입력받으면, Date.now()값에 카운트 다운할 시간을 더한 then을 만들었었다. 이것이 우리가 이동할 시간이므로, displayEndTime(then)
을 해주면 된다.
타이머 시작시 첫 화면 표시하기
아래와 같이 setInterval이 시작되어 1초가 지나야만 화면에 남은 시간이 표시되기 떄문에
첫화면에서 시간을 표시해주어야 한다.
function timer(seconds) {
clearInterval(countdown);
const now = Date.now();
const then = now + seconds * 1000;
displayCountdown(seconds)//
displayEndTime(then);
countdown = setInterval(() => {
const secondsLeft = Math.round((then - Date.now()) / 1000);
displayCountdown(secondsLeft)
console.log(secondsLeft)
if(secondsLeft <= 0) clearInterval(countdown);
}, 1000)
}
Author And Source
이 문제에 관하여([JS30] -29) Countdown Clock), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gygy/JS30-29-Countdown-Clock저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)