새소식
300x250
2. 웹개발/Javascript Function 모음
[JavaScript ] 카운트 다운 함수(Count Down Function)
- -
728x90
[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>- 이 함수를 응용하여 종료시 다른 사진을 가져온다던지, 날짜형식을 바꿔 표현한다던지 응용해서 사용하면 될 것 같다.
300x250
'2. 웹개발 > Javascript Function 모음' 카테고리의 다른 글
Contents
소중한 공감 감사합니다