• HTML
  • JS

SCRIPT 이용한 D-DAY 와 현재까지 현재일까지 몇일 지났는지 확인 소스

2018-11-09 139

설명

  • 카카오톡 링크

SCRIPT 이용한 D-DAY 와 현재까지 현재일까지 몇일 지났는지 확인 소스 입니다

소스실행 현황

소스보기( X표시가 나타나면 무시하셔도 됩니다! )

<style>
	.time_ul {display:inline-block; width:100%}
	.time_ul li {display:inline-block; width:100%; font-size:16px; line-height:1.2em}
	.time_ul li span {font-size:16px; line-height:1.2em}
	#newdate .red {color:red}
</style>
<ul class="time_ul">
	<li>2018년 12월 30일까지 <span id="newday"></span>Day</em></li>
	<li><span id="newdate"></span></li>
</ul>
	
<script type="text/javascript">
	//실시간 시간
	function printClock() {
		var clock = document.getElementById("newdate");            // 출력할 장소 선택
		var currentDate = new Date();                                   // 현재시간
		var year = new Date().getFullYear();                                   // 현재년도
		var month = new Date().getMonth() + 1;                                   // 현재월
		var day = new Date().getDate();                                   // 현재일
		var calendar = currentDate.getFullYear() + "-" + (currentDate.getMonth()+1) + "-" + currentDate.getDate() // 현재 날짜
		var amPm = 'AM'; // 초기값 AM
		var currentHours = addZeros(currentDate.getHours(),2); 
		var currentMinute = addZeros(currentDate.getMinutes() ,2);
		var currentSeconds =  addZeros(currentDate.getSeconds(),2);
		
		if(currentHours >= 12){ // 시간이 12보다 클 때 PM으로 세팅, 12를 빼줌
			amPm = 'PM';
			currentHours = addZeros(currentHours - 12,2);
		}

		if(currentSeconds >= 50){// 50초 이상일 때 색을 변환해 준다.
		   currentSeconds = '<span class="red">'+currentSeconds+'</span>'
		}
		clock.innerHTML = year+"."+month+"."+day+ " " + currentHours+":"+currentMinute+":"+currentSeconds +" <span>"+ amPm+"</span>"; //날짜를 출력해 줌
		
		setTimeout("printClock()",1000);         // 1초마다 printClock() 함수 호출
	}

	function addZeros(num, digit) { // 자릿수 맞춰주기
		  var zero = '';
		  num = num.toString();
		  if (num.length < digit) {
			for (i = 0; i < digit - num.length; i++) {
			  zero += '0';
			}
		  }
		  return zero + num;
	}

	// d day
	var now = new Date();
	var then = new Date("December 30,2018");
	var gap = now.getTime() - then.getTime();
	gap = Math.floor(gap / (1000 * 60 * 60 * 24));
	document.getElementById("newday").innerHTML = gap; 

	//실시간 시간 호출
	printClock();

</script>