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

5

자바스크립트를 사용한 날짜 카운트다운 스크립트입니다(예: 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 스크립트를 이용하면 더 깔끔하게 표시하는 것이 가능합니다.

PHP 스크립트/자바스크립트 템플릿:

기능을 직접 구현하는 것에 어려움을 겪거나 시간이 많이 소요되는 경우 다양한 PHP 스크립트, 자바스크립트 템플릿, JQuery 템플릿, CSS 코드, 워드프레스 플러그인 등을 판매하는 CodeCanyon에서 비교적 저렴한 가격에 PHP 스크립트나 Javascript/jQuery 템플릿을 구입할 수 있습니다.

코드캐년에서 판매되는 javascript/jQuery 템플릿
CodeCanyon에서 판매되는 javascript/jQuery 템플릿

5 개 댓글

    • 안녕하세요?

      어렵게 생각하지 마시고 '일'을 시간으로 환산하여 시간과 더해주면 되지 않을까요?

      http://jsfiddle.net/mn25aLo9/1/

      만약 '분'과 '초'가 필요 없다면 그 부분은 삭제하면 될 것입니다.

      • 또는, 새로운 시간을 다음과 같이 계산하여 표시해도 동일한 결과를 얻을 수 있을 것 같습니다.

        Math.floor(distance / _hour);

        예시: http://jsfiddle.net/tm9yLho8/

    • 안녕하세요?

      블로그를 방문해주셔서 감사합니다.

      time zone에 대해서는 다음 글들을 참고해보시기 바랍니다.

      https://www.w3schools.com/jsref/jsref_gettimezoneoffset.asp

      https://stackoverflow.com/questions/10087819/convert-date-to-another-timezone-in-javascript?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa

      https://www.youtube.com/watch?v=UT2dP447roo

      해보시고 잘 안 되시면 https://hackya.com/kr/ 사이트에서 문의해보시면 정확한 답변을 받을 수 있을 것 같습니다.

      즐거운 하루되세요.

댓글 남기기

댓글을 입력해주세요!
이름을 입력해주세요