자바스크립트를 사용한 날짜 카운트다운 스크립트입니다(예: 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"를 클릭하면 소스를 다운로드받을 수 있습니다(링크가 깨진 것도 있음).
이러한 스크립트를 사용하면 서비스를 릴리스할 날짜까지 남은 일 수나 사이트 오픈까지 남은 일 수 등을 표시하는 것도 가능합니다. 이와 같은 기능을 하는 PHP 스크립트를 이용하면 더 깔끔하게 표시하는 것이 가능합니다.
PHP 스크립트/자바스크립트 템플릿:
기능을 직접 구현하는 것에 어려움을 겪거나 시간이 많이 소요되는 경우 다양한 PHP 스크립트, 자바스크립트 템플릿, JQuery 템플릿, CSS 코드, 워드프레스 플러그인 등을 판매하는 CodeCanyon에서 비교적 저렴한 가격에 PHP 스크립트나 Javascript/jQuery 템플릿을 구입할 수 있습니다.
저는 시간만 표시를 하게 했는데 예를 들면 '5500시간 남았습니다'가 아니라 '5,500시간 남았습니다'로 3자리 마다 점을 찍고 싶은데 어떻게 하면 되나요ㅠㅠ (시간만 표시하는 법도 댓글 다신 것 보고 했어요! 감사합니다!)
안녕하세요.
구글에서 1000단위에 콤마를 붙이는 적당한 자바스크립트를 찾아서 응용하시면 될 것입니다.
예시로 다음 jsfiddle을 참고해보세요.
http://jsfiddle.net/1fe6gjn5/
(http://jsfiddle.net/mn25aLo9/1/ 예시에 천 단위에 콤마를 붙이는 스크립트를 추가했습니다.)
천 단위에 콤마를 넣는 스크립트는 https://www.w3resource.com/javascript-exercises/javascript-math-exercise-39.php 문서를 참조했습니다.
예제 확인해보니
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값 불러봐서 호출이 가능할까요?
DB에서 데이터 형식을 오류가 나지 않는 형식으로 바꾸거나, 데이터를 불러온 후에 데이터를 공백을 기준으로 두 부분으로 나누어서 조작한 후에 CountDownTimer 함수 안에 넣으면 되지 않을까요?
아~ 감사합니다
한번 해보겠습니다
안녕하세요
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'); // 끝나는곳
이렇게 하려고 합니다
해보니 에러가 나는데 다른 방법이 있을까요?
안녕하세요, 정성윤님.
다음 w3schools 문서를 참고해보시겠어요?
https://www.w3schools.com/howto/howto_js_countdown.asp
예제에서 날짜 포맷을 2020-05-15 식으로 바꾸어도 제대로 작동할 것입니다.
자바스크립트 날짜 형식에 대해서는 다음 w3schools 문서를 참고해보세요.
https://www.w3schools.com/js/js_date_formats.asp
감사합니다
예제 보면서 해보겠습니다
시간만 표시하고 싶은데 어떻게 수정하면 되나요?
안녕하세요?
어렵게 생각하지 마시고 '일'을 시간으로 환산하여 시간과 더해주면 되지 않을까요?
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
해보시고 잘 안 되시면 사이트에서 문의해보시면 정확한 답변을 받을 수 있을 것 같습니다.즐거운 하루되세요.