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

Last Updated: 2023년 07월 17일 13개 댓글
무료 전자책 애드센스 웨비나

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

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

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>

아래 jsfiddle에서 실제 작동을 확인해볼 수 있습니다. 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 템플릿

참고

13 개 댓글

Leave a Comment

  1. 저는 시간만 표시를 하게 했는데 예를 들면 '5500시간 남았습니다'가 아니라 '5,500시간 남았습니다'로 3자리 마다 점을 찍고 싶은데 어떻게 하면 되나요ㅠㅠ (시간만 표시하는 법도 댓글 다신 것 보고 했어요! 감사합니다!)

    응답

  2. 예제 확인해보니
    CountDownTimer('2020-05-15', 'countdown'); // 시작점
    CountDownTimer('2020-05-15', 'newcountdown'); // 끝나는곳
    이렇게 하니 잘 작동하는데요

    CountDownTimer('2020-05-15 13:44:55', 'countdown'); // 시작점
    CountDownTimer('2020-05-15 21:10:00', 'newcountdown'); // 끝나는곳
    이렇게 뒤에 시간을 표시하면 에러가 뜨네요

    확인해보니 CountDownTimer('2020-05-08T12:00:00Z', 'countdown'); // 시작점
    이렇게하니 정상작동을 하는데요

    제가 하고싶은건 DB값을 불러와서 하고싶습니다

    DB 값은 2020-04-08 23:30:00 이형식으로 저장이 되어있더라구요

    이방식으론 에러가 날까요? 아님 그냥 DB값 불러봐서 호출이 가능할까요?

    응답

  3. 안녕하세요
    CountDownTimer('05/13/2020', 'countdown'); // 시작점
    CountDownTimer('05/17/2020 00:00 AM', 'newcountdown'); // 끝나는곳
    이부분을
    CountDownTimer('2020-05-15', 'countdown'); // 시작점
    CountDownTimer('2020-05-15 00:00 AM', 'newcountdown'); // 끝나는곳
    이렇게 하려고 합니다

    해보니 에러가 나는데 다른 방법이 있을까요?

    응답