JavaScript 실시간 D-Day 예제 소스

제 블로그에 대통령 임기, 수능날짜, 크리스마스, 새해 등 D-Day를 보여주는 블로그가 있는데 해당 내용 소스를 적어 봅니다.

 

setInterval()을 이용해서 1초마다 시간을 변경해주었습니다.

 

날짜 계산은 아래 소스를 참고하시기 바랍니다.

 

그리고 보여줄 부분에 innerHTML을 이용해서 카운트를 입력하면 됩니다.

 

<p style="text-align: center; clear: none; float: none;" data-ke-size="size16">2022년 크리스마스</p>
<p style="text-align: center; clear: none; float: none;" data-ke-size="size16">[2023년 12월 25일(월)]</p>
<p style="text-align: center; clear: none; float: none;" data-ke-size="size16">남은기간 : <span id="dateView"> <span style="font-size: 23pt; color: #ff1493;"> <b>로딩중...</b> </span> </span></p>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>    	
  $(document).ready( function() {    		
	
    setInterval(function() {
    	setViewTime()},1000);  		  	
    }); 
    
  	function setViewTime(){  	   		
        var dat1 = new Date();  		
        var dat2 = new Date("2023", "11", "25", "00", "00", "00", "00"); //월에서 1 빼줘야 함    		

        var diff = dat2 - dat1;  		  		
        var currSec = 1000;// 밀리세컨  		
        var currMin = 60 * 1000;// 초 * 밀리세컨  		
        var currHour = 60 * 60 * 1000;// 분 * 초 * 밀리세컨  		
        var currDay = 24 * 60 * 60 * 1000;// 시 * 분 * 초 * 밀리세컨  		  		

        var day = parseInt(diff/currDay);  		
        var hour = parseInt(diff/currHour);  		

        var min = parseInt(diff/currMin);  		
        var sec = parseInt(diff/currSec);  		  		

        var viewHour = hour-(day*24);  		
        var viewMin = min-(hour*60);  		

        var viewSec = sec-(min*60);  		  		

        var viewStr = day+"일 "+viewHour+"시 "+viewMin+"분 "+viewSec+"초";  		  		

        document.getElementById("dateView").innerHTML = "<span style='font-size: 23pt; color: #ff1493;'><b>"+viewStr+"</b></span>";  		  	
    }          
</script>
<p data-ke-size="size16">&nbsp;</p>