Javascript로 카운트다운 타이머를 만드는 방법

소개

카운트다운 타이머는 일정 시간 동안 사용자의 행동을 요구하는 웹페이지에서 꼭 필요한 기능입니다. 웹 페이지에서 사용자 참여를 높이는 데 자주 사용됩니다. 판매 페이지, 옵트인 페이지, 이벤트 페이지 등과 같은 웹 페이지에서 널리 사용됩니다.

이 문서에서는 HTML, CSS 및 JavaScript를 사용하여 사용자 지정 카운트다운 타이머를 만든 방법을 설명하므로 사용자가 직접 만들 수 있습니다.

카운트다운 타이머는 어떻게 작동합니까?

시작하기 전에 카운트다운 타이머가 어떻게 작동하는지 이해해 봅시다. 지금부터 지정된 나중 시간까지 남은 시간을 보여줍니다. 이를 얻으려면 나중 시간에서 지금 시간을 빼야 합니다.

앞에서 언급했듯이 남은 시간을 계산하려면 미래 시간에서 현재 시간을 빼야 합니다. 다행스럽게도 이를 위해 JavaScript "Date()"메서드를 사용할 수 있습니다.

두 날짜를 빼는 간단한 예를 살펴보겠습니다.

let first_date = new Date('10/18/2022') 
let second_date = new Date('09/18/2022')

console.log(first_date - second_date)
//2592000000

let date_today = new Date() //today's date

console.log(first_date - date_today)
//5140586280

위에서 날짜의 차이를 밀리초 단위로 얻을 수 있습니다.

이제 밀리초를 동등한 일, 시, 분, 초로 변환할 때입니다.

기본 변환에서:
1일 = 1000 x 60 x 60 x 24밀리초
1시간 = 1000 x 60 x 60밀리초
1분 = 1000 x 60밀리초
1초 = 1000밀리초

const dateTill = new Date('10/18/2022')
//end date
const dateFrom = new Date();
//start date (today)

const diff = dateTill - dateFrom
//difference in dates

day_to_miliseconds = 1000 * 60 * 60 * 24
// 1 day equivalent in milliseconds
hour_to_miliseconds = 1000 * 60 * 60
// 1 hour equivalent in milliseconds
minute_to_miliseconds = 1000 * 60
// 1 minute equivalent in milliseconds
second_to_miliseconds = 1000
// 1 second equivalent in milliseconds

let days = Math.floor(diff / day_to_miliseconds );
// number of days from the difference in dates
let hours = Math.floor((diff % day_to_miliseconds) / hour_to_miliseconds);
// number of hours from the remaining time after removing days 
let minutes = Math.floor((diff % hour_to_miliseconds) / minute_to_miliseconds);
// number of minutes from the remaining time after removing hours
let seconds = Math.floor((diff % minute_to_miliseconds) / second_to_miliseconds);
// number of hours from the remaining time after removing seconds

console.log(days, hours, minutes, seconds)
// expected result

멋지죠?
이제 데이터를 얻는 방법을 이해했으므로 HTML 및 CSS를 사용하여 아름다운 카운트다운 타이머를 디자인해 보겠습니다.



위의 디자인을 구현한 상태에서 JavaScriptsetInterval() 메서드를 사용하여 카운트다운 기능을 구현합니다.

setInterval() 메서드는 어떻게 작동합니까?

setInterval() 메서드는 clearInterval() 메서드가 호출될 때까지 간격(예: 1분마다, 5분마다 등)으로 함수를 실행하는 데 사용됩니다.

통사론

setInterval(() => function(), time);

function()는 매번 실행할 함수를 나타냅니다

.

time는 함수를 호출해야 하는 간격을 밀리초 단위로 나타냅니다.

또한 지정된 종료 날짜에 도달하면 clearInterval() 방법을 사용하여 setInterval() 방법을 중지합니다.

카운트다운 타이머의 경우 1초(1000밀리초)마다 실행되는 함수를 작성합니다.
아래 코드를 주의 깊게 살펴보자.



그게 전부입니다. 매우 멋진 사용자 지정 카운트다운 타이머가 있습니다.

참고: 2022년 10월 18일 또는 그 이후에 이 기사를 읽고 있는 경우 카운트다운 타이머가 표시됩니다. 이유를 알아야 합니까? "2022년 10월 18일"이 종료 날짜이기 때문입니다. 종료일을 오늘 이후로 자유롭게 변경하고 마법을 확인하세요.

마무리

카운트다운 타이머는 판매 페이지, 옵트인 페이지 및 기타 많은 사용 사례와 같은 일부 웹 페이지에서 중요한 기능입니다. 이 기사에서는 javascriptsetInterval() 및 clearInterval() 메서드를 사용하여 몇 가지 간단한 단계로 카운트다운 타이머를 만드는 방법을 설명했습니다.

에서 내 기사를 확인할 수도 있습니다.

읽어주셔서 감사합니다 🌟🌟🌟

질문이 있으시면 댓글 섹션에 남겨주세요.

나는 당신과 연결하고 싶습니다

즐거운 코딩하세요!