javascript를 사용한 간단한 날짜 카운트다운

참고: 인기 테마인 BE 테마(33%)The 7(35%) 할인 행사를 진행하고 있습니다.

자바스크립트를 사용한 날짜 카운트다운 스크립트입니다(예: 2017년 새해까지 남은 일 수 등). 간단하게 활용할 수 있을 것 같습니다.

CountDownTimer('01/01/2017', 'countdown'); // 2017년 1월 1일까지
CountDownTimer('01/01/2018 00:00 AM', 'newcountdown'); // 2018년 1월 1일까지, 시간을 표시하려면 01:00 AM과 같은 형식을 사용합니다.

function CountDownTimer(dt, id)
{
var end = new Date(dt);

var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;

function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {

clearInterval(timer);
document.getElementById(id).innerHTML = 'EXPIRED!';

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

document.getElementById(id).innerHTML = days + '일 ';
document.getElementById(id).innerHTML += hours + '시간 ';
document.getElementById(id).innerHTML += minutes + '분 ';
document.getElementById(id).innerHTML += seconds + '초';
}

timer = setInterval(showRemaining, 1000);
}
// Source: stackoverflow

카운트다운을 표시하려면 다음과 같은 HTML 코드를 사용합니다.

<div id="countdown"></div>
<div id="newcountdown"></div>

여기에서 실제 작동을 확인해볼 수 있습니다. CSS를 사용하여 스타일을 조정해주면 나름대로 심플하고 괜찮을 것 같습니다.

또는 “EASY COUNTDOWN TO DATE WITH JAVASCRIPT & JQUERY(자바스크립트와 jQuery를 사용한 쉬운 날짜 카운트다운)”에 나와 있는 스크립트를 사용해볼 수 있습니다.

또, 이 글에 소개된 jQuery 스크립트를 사용하면 레이아웃이 괜찮은 날짜 카운트다운을 사이트에 추가할 수 있습니다. (글이 작성된지 오래되어 연결 안 되는 링크도 있습니다.) 아래 그림과 같이 “Source“를 클릭하면 소스를 다운로드받을 수 있습니다(링크가 깨진 것도 있음).

Countdown

이러한 스크립트를 사용하면 서비스를 릴리스할 날짜까지 남은 일 수나 사이트 오픈까지 남은 일 수 등을 표시하는 것도 가능합니다. 이와 같은 기능을 하는 PHP 스크립트를 이용하면 더 깔끔하게 표시하는 것이 가능합니다.



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.