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

13 Comments

자바스크립트를 사용한 날짜 카운트다운 스크립트입니다(예: 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개 댓글

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

    응답

    1. 안녕하세요.

      구글에서 1000단위에 콤마를 붙이는 적당한 자바스크립트를 찾아서 응용하시면 될 것입니다.

      예시로 다음 jsfiddle을 참고해보세요.

      http://jsfiddle.net/1fe6gjn5/

      (http://jsfiddle.net/mn25aLo9/1/ 예시에 천 단위에 콤마를 붙이는 스크립트를 추가했습니다.)

      천 단위에 콤마를 넣는 스크립트는 https://www.w3resource.com/javascript-exercises/javascript-math-exercise-39.php 문서를 참조했습니다.

      응답

  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값 불러봐서 호출이 가능할까요?

    응답

    1. DB에서 데이터 형식을 오류가 나지 않는 형식으로 바꾸거나, 데이터를 불러온 후에 데이터를 공백을 기준으로 두 부분으로 나누어서 조작한 후에 CountDownTimer 함수 안에 넣으면 되지 않을까요?

      응답

  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'); // 끝나는곳
    이렇게 하려고 합니다

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

    응답

    1. 안녕하세요?

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

      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

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

      즐거운 하루되세요.

      응답

댓글 남기기

* 이메일 정보는 공개되지 않습니다.