본문으로 바로가기
반응형

[JavaScript ] 카운트 다운 함수(Count Down Function)

안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 카운트 다운 함수 만들기 입니다. : ) 

 

★ 실행 예시 사진 ★

 

 

0. 들어가기 앞서

 

많은 이벤트 페이지나, 신년 행사 등 특정 웹페이지에서 카운트 다운 되는 화면을 본 적이 있을 것이다. 스크립트로 카운트 다운 함수를 만드는 방법을 적어보려 한다.

 

Sample01 : 내일까지

 

 

Sample02 : 2024년 4월 1일까지

 

 

 

Sample03 : 종료 케이스

 

 

▶ 샘플 소스

 - 미리 로딩 된 화면에 정의된 대로

1) 특정일 기준으로 카운트 다운

2) 특정일을 지난 경우 종료 처리

 

 - Sample Source Code

1) html

 - html은 CountDown 노출할 특정 영역만 잡아 주도록 하자.

<body>
  <h1>Sample01 : 내일까지</h1>
  <h2 id="sample01"></h2>
  <br/>
  <h1>Sample02 : 2024년 4월 1일까지 </h1>
  <h2 id="sample02"></h2>
  <h2 id="sample03"></h2>
  <br/>
  <h1>Sample03 : 종료 케이스 </h1>
  <h2 id="sample04"></h2>
</body>

 

2) Javascript

<script>
	const countDownTimer = function (id, date) {
		var _vDate = new Date(date); // 전달 받은 일자
		var _second = 1000;
		var _minute = _second * 60;
		var _hour = _minute * 60;
		var _day = _hour * 24;
		var timer;

		function showRemaining() {
			var now = new Date();
			var distDt = _vDate - now;

			if (distDt < 0) {
				clearInterval(timer);
				document.getElementById(id).textContent = '해당 이벤트가 종료 되었습니다!';
				return;
			}

			var days = Math.floor(distDt / _day);
			var hours = Math.floor((distDt % _day) / _hour);
			var minutes = Math.floor((distDt % _hour) / _minute);
			var seconds = Math.floor((distDt % _minute) / _second);

			//document.getElementById(id).textContent = date.toLocaleString() + "까지 : ";
			document.getElementById(id).textContent = days + '일 ';
			document.getElementById(id).textContent += hours + '시간 ';
			document.getElementById(id).textContent += minutes + '분 ';
			document.getElementById(id).textContent += seconds + '초';
		}

		timer = setInterval(showRemaining, 1000);
	}

	var dateObj = new Date();
	dateObj.setDate(dateObj.getDate() + 1);

	countDownTimer('sample01', dateObj); // 내일까지
	countDownTimer('sample02', '04/01/2024 00:00 AM'); // 2024년 4월 1일까지, 시간을 표시하려면 01:00 AM과 같은 형식을 사용한다.
	countDownTimer('sample03', '04/01/2024'); // 2024년 4월 1일까지
	countDownTimer('sample04', '04/01/2019'); // 2024년 4월 1일까지
</script>

 - 이 함수를 응용하여 종료시 다른 사진을 가져온다던지, 날짜형식을 바꿔 표현한다던지 응용해서 사용하면 될 것 같다.

반응형

댓글을 달아 주세요

  1. ㅎㄹ 2020.07.22 16:15

    저는 똑같이 했는데도 안나오네요..

  2. 월드 안녕 2020.10.10 20:12

    어떻게 하면 '1일 10시간 10분 10초'가 아닌 '34시간 10분 10초'로 day없이 hour으로만 1000시간이 넘는 시간까지 표시 할 수 있나요?

  3. Favicon of https://timetree-log.tistory.com BlogIcon TimeTREE 2020.10.18 21:47 신고

    안녕하세요! 해당 코드가 정말 좋아보여 출저를 밝히고 제 블로그에도 적어두고자 하는데 괜찮으실까요?

    혹시 GitHub 에도 코드 올려두신게 있으시다면 해당 출저도 밝히도록 하겠습니다!