본문 바로가기

Javascript

D-DAY 카운트다운

D-DAY를 만들어야하는데 스크립트로 해야했다. 기존에 만들어둔 자료를 활용할려고 했는데, 테스트하다보니 정확도가 떨어져서 만들다가 뭔가 마음에 안들어서 구글링하니 깔끔한 샘플이 있다.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script language="javascript">
$(function(){
var countDownDate = new Date('2019-03-25T23:00:00'); //목표날짜시간
function fnCountDown(){
var now = new Date().getTime();
var distance = countDownDate - now;
if (distance < 0) {
clearInterval(countDownTimer);
}
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
if(days < 10) days = '0'+days;
if(hours < 10) hours = '0'+hours;
if(minutes < 10) minutes = '0'+minutes;
if(seconds < 10) seconds = '0'+seconds;
$(".countTimeDay").html(days);
$(".countTimeHour").html(hours);
$(".countTimeMinute").html(minutes);
$(".countTimeSecond").html(seconds);
}
//초기화
fnCountDown();
//카운트다운 셋팅
var countDownTimer = setInterval(fnCountDown, 1000); /* millisecond 단위의 인터벌 */
});
</script>

<div>
<strong>카운트 다운</strong>
<span class="countTimeDay">00</span>일
<span class="countTimeHour">00</span>시
<span class="countTimeMinute">00</span>분
<span class="countTimeSecond">00</span>초
</div>


카운트 다운 00000000

숫자는 2자리로 나오게 했다. 필요없으면 그 부분을 삭제해도 된다.

다음은 javascript만으로 만들었다.
<style>
body{margin: 0px;border: 0px;width:350px;}
audio{width:350px;height: 28px;}
</style>
<script language="javascript">
var countDownDate = new Date('2019-03-25T23:00:00'); //목표날짜시간

function fnCountDown(){
var now = new Date().getTime();
var distance = countDownDate - now;
if (distance < 0) {
clearInterval(countDownTimer);
}
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
if(days < 10) days = '0'+days;
if(hours < 10) hours = '0'+hours;
if(minutes < 10) minutes = '0'+minutes;
if(seconds < 10) seconds = '0'+seconds;
document.getElementsByClassName('countTimeDay')[0].innerHTML = days;
document.getElementsByClassName('countTimeHour')[0].innerHTML = hours;
document.getElementsByClassName('countTimeMinute')[0].innerHTML = minutes;
document.getElementsByClassName('countTimeSecond')[0].innerHTML = seconds;
}

window.onload = function(){
//초기화
fnCountDown();

//카운트다운 셋팅
var countDownTimer = setInterval(fnCountDown, 1000); /* millisecond 단위의 인터벌 */
}
</script>

<div>
<strong>카운트 다운</strong>
<span class="countTimeDay">00</span>일
<span class="countTimeHour">00</span>시
<span class="countTimeMinute">00</span>분
<span class="countTimeSecond">00</span>초
</div>



참고 페이지

'Javascript' 카테고리의 다른 글

그래프(차트)를 그려보자 chart.js  (0) 2018.03.12
Naver Maps Javascript API v3를 사용해보자  (0) 2017.01.06
한글 검사 패턴  (0) 2016.01.13
IE 호환성 보기 문제점  (0) 2015.09.02
그래프API - taucharts  (0) 2015.03.19