Computer >> 컴퓨터 >  >> 프로그램 작성 >> JavaScript

JavaScript 카운트다운 타이머:튜토리얼

카운트다운 타이머는 주요 이벤트를 카운트다운하려는 사람들이 인터넷 전체에서 사용합니다.

카운트다운 타이머를 사용하여 새 웹사이트가 시작될 때까지 카운트다운할 수 있습니다. 카운트다운 타이머는 제품 발표를 할 때 표시할 수 있습니다. 탐색할 가능성이 너무 많습니다.

이 가이드에서는 HTML, CSS 및 JavaScript의 세 가지 기술을 사용하여 JavaScript에서 카운트다운 타이머를 만드는 방법을 보여줍니다. 시작하겠습니다!

웹페이지 설정

첫 번째 단계는 기본 웹 페이지를 설정하는 것입니다. 이 가이드에서는 외부 라이브러리를 사용하는 것에 대해 걱정하지 않을 것입니다. 우리는 그것을 단순하게 유지하고 평범한 오래된 HTML, CSS 및 JavaScript를 사용할 것입니다.

HTML 파일을 생성하여 시작하겠습니다. 

<!DOCTYPE html>
<html>
	<script>
		// We'll store our JavaScript code here
	</script>
	<style>
		// We'll write our CSS styles here
	</style>
	<body>
		<h1>It's almost time…</h1>
		<div id="timer"></div>
	</body>
</html>

우리 코드는 지금 특별한 것을 반환하지 않습니다. 아래를 참조하십시오.

JavaScript 카운트다운 타이머:튜토리얼

아직 코드에 스타일을 추가하지 않았거나 JavaScript 타이머를 만들지 않았기 때문에 이렇게 표시됩니다. 타이머를 작동시킬 자바스크립트를 만드는 방법으로 넘어갑시다.

타이머 만들기

JavaScript에는 날짜와 시간을 다루는 데 사용할 수 있는 Date라는 편리한 객체가 있습니다. 우리는 이 객체를 두 가지 목적으로 사용할 것입니다. 카운트다운하려는 시간의 타임스탬프를 가져오는 것과 현재 날짜를 가져오는 것입니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

이 튜토리얼에서는 모든 스크립트를 태그에 작성할 것입니다. 우리는 외부 스크립트를 사용하지 않을 것입니다.

현재 날짜에서 카운트다운 날짜를 빼면 다음 두 날짜의 차이가 나옵니다. 

var timeLeft = +new Date("2021-05-04") - +new Date();

이 코드는 다음 스타워즈 데이인 2021년 5월 4일까지 남은 일수를 계산합니다.

이제 이 이틀 간의 차이를 알지만 몇 가지 문제가 있습니다. 첫째, 아직 카운트다운하는 타이머가 없습니다. 둘째, 날짜는 사람이 쉽게 읽을 수 있는 형식으로 저장되지 않습니다. 밀리초 단위로 저장되므로 우리에게는 그다지 편리하지 않습니다. 시간을 일, 시간, 분으로 변환해야 합니다.

더 읽기 쉬운 형식으로 남은 시간을 계산하기 위해 다음 코드를 사용할 것입니다.

var daysLeft = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
var hoursLeft = Math.floor((timeLeft / (1000 * 60 * 60)) % 24);
var minutesLeft = Math.floor((timeLeft / 1000) / 60 % 60);

다음 코드를 사용하여 값을 문자열로 형식화할 수 있습니다. 

const timeLeftText = `${daysLeft} days ${hoursLeft} hours ${minutesLeft} minutes.`;

이 코드에서는 문자열 보간을 사용하여 이전에 계산한 값을 대체합니다. 이렇게 하면 314일 13시간 52분과 같은 타임스탬프가 표시됩니다.

타임스탬프를 생성했으므로 이제 웹페이지에 배치할 수 있습니다.

document.getElementById("timer").innerHTML = timeLeftText;

모든 코드를 함수로 이동할 수 있습니다. 

function countdown() {
	var daysLeft = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
var hoursLeft = Math.floor((timeLeft / (1000 * 60 * 60)) % 24);
var minutesLeft = Math.floor((timeLeft / 1000) / 60 % 60);

const timeLeftText = `${daysLeft} days ${hoursLeft} hours ${minutesLeft} minutes.`;
document.getElementById("timer").innerHTML = timeLeftText;
}

countdown();

페이지를 로드하면 다음이 반환됩니다.

JavaScript 카운트다운 타이머:튜토리얼

이제 타이머가 있습니다. 오늘은 끝났어, 그렇지? 아니요; 그렇게 빠르지 않습니다. 잠시 기다리면 타이머가 실제로 카운트다운되지 않는 것을 볼 수 있습니다. 매분마다 업데이트하도록 브라우저에 알려야 하기 때문입니다. 다음 코드를 사용하여 수행합니다.

setInterval(countdown, 60000);

이 코드는 countdown() 함수가 선언된 후에 추가되어야 합니다. 이렇게 하면 60,000밀리초마다 페이지가 새로 고쳐집니다. 이것은 매 60초에 해당합니다.

이제 코드를 업데이트할 때 매분마다 변경되는 것을 볼 수 있습니다!

일부 스타일 추가

카운트다운 타이머는 기능적일 수 있지만 미학적으로 만족스럽지는 않습니다. 페이지를 더 매력적으로 만들기 위해 몇 가지 스타일을 만들어 보겠습니다. 

<style>
body {
	padding-top: 20%;
	height: 100vh;
background: linear-gradient(to bottom right, #CAA89C, #434EFC);
}
h1, p {
	text-align: center;
	color: white;
}
</style>

이제 웹페이지는 다음과 같습니다.

JavaScript 카운트다운 타이머:튜토리얼

보시다시피, 이제 페이지에 그라데이션 배경이 있고 텍스트가 가운데에 정렬되고 텍스트가 흰색으로 표시됩니다. 멋지네요!

결론

카운트다운 타이머는 많은 사이트의 중요한 기능입니다. 개인 및 전문 웹 페이지 모두에서 카운트다운을 볼 수 있습니다. 사람의 블로그에는 결혼식 카운트다운이 포함될 수 있습니다. 회사 웹 사이트에는 제품 출시 카운트다운이 포함될 수 있습니다.

이제 전문가처럼 JavaScript 카운트다운 타이머를 만들 준비가 되었습니다!