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>

카운트 다운 00일 00시 00분 00초

숫자는 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>

참고 페이지

https://www.w3schools.com/howto/howto_js_countdown.asp

https://www.w3schools.com/js/js_date_formats.asp