마카로닉스

1511 No
전역일 계산기

2018-07-22 15:44:44 By 라이트 0 1281 댓글수 4 포스트 하기
5월 2024
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31
전역일 계산기
<!DOCTYPE html>
<html lang="kr" style="height: auto;">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>전역일 계산기</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author">
<link rel="stylesheet" href="./res/bootstrap.min.css">
<link rel="stylesheet" href="./res/style.css">
<link rel="stylesheet" href="./res/animate.css">
<link rel="stylesheet" href="./res/line-icons.css">
<link rel="stylesheet" href="./res/font-awesome.css">
<link rel="stylesheet" href="./res/page_coming_soon.css">
<link id="style_color" rel="stylesheet" href="./res/default.css">

</head>
<body class="coming-soon-page">
	<div class="coming-soon-border"></div>
	<div class="coming-soon-bg-cover"></div>
	<div class="container cooming-soon-content valign__middle"
		style="padding-top: 10.2188px;">
		<div class="row">
			<div class="col-md-12 coming-soon" style="text-align:left;">
				<!--  학사장교 3년 - 36개월 학군 RT - 28개월 -->
				<h1 style="top: -150px;text-align:center; margin-bottom:20px;">전역일 계산기</h1>
			</div>
			
			<div class="col-md-3 coming-soon" style="text-align:left;"></div>
			<div class="col-md-7 coming-soon" style="text-align:left;">
				<p>
					<input type="radio" name="howto" checked="checked" class="howto"
						value="chasu"> 차수 선택 :						
				 <select name="chasu" id="selectChasu" style="color:#000;">						
						<option value="2021060136">학사 140기</option>
						<option value="202060136">학사 139기</option>
						<option value="2019060136">학사 138기</option>
						<option value="2018060136">학사 137기</option>
						<option value="2017060136">학사 136기</option>
						<option value="2016060136">학사 135기</option>
						<option value="2015060136">학사 134기</option>
						<option value="2017060128">학군 45기</option>
						<option value="2016060128">학군 44기</option>
						<option value="2015060128">학군 43기</option>
					</select>

				</p>
				<p>
								
				
				<input type="radio" name="howto" value="self"> 직접 입력 : 입대일
				<input type="text" maxlength=9 size=9 numberonly="true" id="endDate" style="color:#000;" />

						 복무개월 : <input type="text" maxlength=3
						numberonly="true" id="indayMonth" value=""  style="color:#000;"/> 개월
				</p>
				<div style="text-align:center;"><input type="button" value="계산" onclick='setData();' class="btn btn-warning" ></input></div>

				<p id="write1"><!-- 입대날짜 --></p>									
				<p id="write2"><!-- 복무기간 --></p>
				<p id="write3"><!-- 현재날짜 --></p>
				<p id="write4"><!-- 전역날짜 --></p>
			</div>

		</div>
		<div class="coming-soon-plugin" style="height: 200px;">
			<div id="defaultCountdown" class="is-countdown">
<span class="countdown-row countdown-show4">
	<span class="countdown-section" >
		<span class="countdown-amount" id="year">0</span>
		<span class="countdown-period" >년</span>
	</span>
	<span class="countdown-section" >
		<span class="countdown-amount" id="month">0</span>
		<span class="countdown-period" >개월</span>
	</span>
	<span class="countdown-section" >
		<span class="countdown-amount" id="day">0</span>
		<span class="countdown-period" >일</span>
	</span>
	<span class="countdown-section">
		<span class="countdown-amount" id="hour">0</span>
		<span class="countdown-period">시간</span>
	</span>
	<span class="countdown-section">
		<span class="countdown-amount" id="minute">0</span>
		<span class="countdown-period">분</span>
	</span>
	<span class="countdown-section">
	 	<span class="countdown-amount" id="seconds">0</span>
		<span class="countdown-period">초</span>
	</span>
	
	<span class="countdown-section">
	 	<span class="countdown-amount" id="seconds2">0</span>
		<span class="countdown-period">ms</span>
	</span>

	
	<span class="countdown-section">	
		<span class="countdown-period" style="height:140px; display: inline;" id="displayText">남았습니다.</span>
	</span>

	</span>
			</div>
		</div>
	</div>



	<!-- === End Sticky-Footer ===-->
	<!-- JS Global Compulsory-->
	<script type="text/javascript" src="./res/jquery.min.js"></script>
	<script type="text/javascript" src="./res/jquery-migrate.min.js"></script>
	<script type="text/javascript" src="./res/bootstrap.min.js"></script>
	<!-- JS Implementing Plugins-->
	<script type="text/javascript" src="./res/back-to-top.js"></script>
	<script type="text/javascript" src="./res/smoothScroll.js"></script>
	<script type="text/javascript" src="./res/jquery.plugin.js"></script>
	<script type="text/javascript" src="./res/jquery.backstretch.min.js"></script>
	<!-- JS Page Level-->
	<script type="text/javascript" src="./res/app.js"></script>
	<script type="text/javascript" src="./res/page_coming_soon.js"></script>

	<!-- Background Slider (Backstretch)-->
	<script>
		$.backstretch([ "./res/2.jpg",
				"./res/3.jpg",
				"./res/4.jpg" ], {
			fade : 1000,
			duration : 7000
		});
	</script>


<script>
$(function(){
		 
	var endDate; //전역날짜
	
	//숫자만 입력 함수
	$(document).on("keyup", "input:text[numberOnly]", function() {$(this).val( $(this).val().replace(/[^0-9]/gi,"") );});
    $(document).on("keyup", "input:text[datetimeOnly]", function() {$(this).val( $(this).val().replace(/[^0-9:\-]/gi,"") );});
	

		 
		 
	 //날짜 포멧 함수
	 Date.prototype.format = function(f) {
		    if (!this.valueOf()) return " ";
		 
		    var weekName = ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"];
		    var d = this;
		     
		    return f.replace(/(yyyy|yy|MM|dd|E|hh|mm|ss|a\/p)/gi, function($1) {
		        switch ($1) {
		            case "yyyy": return d.getFullYear();
		            case "yy": return (d.getFullYear() % 1000).zf(2);
		            case "MM": return (d.getMonth() + 1).zf(2);
		            case "dd": return d.getDate().zf(2);
		            case "E": return weekName[d.getDay()];
		            case "HH": return d.getHours().zf(2);
		            case "hh": return ((h = d.getHours() % 12) ? h : 12).zf(2);
		            case "mm": return d.getMinutes().zf(2);
		            case "ss": return d.getSeconds().zf(2);
		            case "a/p": return d.getHours() < 12 ? "오전" : "오후";	          
		            default: return $1;
		        }
		    });
		};
		 
		String.prototype.string = function(len){var s = '', i = 0; while (i++ < len) { s += this; } return s;};
		String.prototype.zf = function(len){return "0".string(len - this.length) + this;};
		Number.prototype.zf = function(len){return this.toString().zf(len);};
		
});





function setData(){
	var howto=$("input:radio[name=howto]:checked").val();
	
	if(howto=="self"){   //직접 입력시
		var strDate=$("#endDate").val(); //입대일
		var indayMonth=$("#indayMonth").val();// 복무기간;
		calDate(strDate, indayMonth);
	}else{		
		var info=$("#selectChasu").val();
		var strDate =info.substring(0,8);		
		var indayMonth =info.substring(8,10);
		$("#endDate").val(""); 
		$("#indayMonth").val("");
		$("#indayMonth").val("");
		calDate(strDate, indayMonth);	
	}
}



function calDate(strDate, inputMonth){
	
	//substring - (시작 인덱스, 종료인덱스);  
	var year =strDate.substring(0,4);
	var month=strDate.substring(4, 6);
	var day=strDate.substring(6, 8);

	//입대날짜
	var inputDate = new Date(year, month, day);
	//월은 0(1월)에서 11(12월)까지 번호가 지정되고,  요일은 0(일요일)에서 6(토요일)까지 번호가 지정. 따라서 -1 을 한다.
	inputDate.setMonth(inputDate.getMonth()+Number(inputMonth)-1);
	//입대 날짜를 포함하므로 하루를 뺀다.
	inputDate.setDate(inputDate.getDate()-1);


	//전역 날짜
	var year2 =inputDate.format("yyyy");
	var month2=inputDate.format("MM");
	var day2=inputDate.format("dd");
	

	//남은 날짜 계산
	var startDate=new Date(year, month-1, day);
	endDate=new Date(year2, month2-1, day2, "24" ,"00","00");//자정 까지이므로	
	
	
	document.getElementById("write1").innerHTML="입대날짜  : " +year+"년 "+month+"월 " + day +" 일 ";
	document.getElementById("write2").innerHTML="복무기간  : "+inputMonth+"개월" ;
	
	var nowDay=new Date();
	document.getElementById("write3").innerHTML="현재날짜 : " + nowDay.getFullYear()+"년 " +(nowDay.getMonth()+1)+"월 " + nowDay.getDate() + "일";
	document.getElementById("write4").innerHTML="전역날짜 : " + year2+"년 " +month2+"월 " + day2 + "일";	
	
	getTime();
	
}


function getTime() { 		
	var HTM="";
	var intervalYear;
	var intervalMonth;
	var intervalDay;
	
	now = new Date(); 
	// 원하는 날짜, 시간 정확하게 초단위까지 기입.
	dday = endDate;
	
	days = (dday - now) / 1000 / 60 / 60 / 24; 
	daysRound = Math.floor(days); 
	hours = (dday - now) / 1000 / 60 / 60 - (24 * daysRound); 
	hoursRound = Math.floor(hours); 
	minutes = (dday - now) / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound); 
	minutesRound = Math.floor(minutes); 
	seconds = (dday - now) / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound); 
	secondsRound = Math.round(seconds); 
	
	//ms 추 가
	secondsRoundSplit = seconds.toFixed(2);  	
	secondsRoundArray= secondsRoundSplit.split(".");
	secondsRound2=secondsRoundArray[1];
	


	intervalYear=Math.floor(daysRound/365);
	intervalMonth=Math.floor( (daysRound-(intervalYear*365)) /30);
	intervalDay=(daysRound-(intervalYear*365)) %30;
	
	if(intervalYear<1){
		//1년 보다 클경우  700 -
		//daysRound =800 일
		// 800-(intervalYear*365) => 100일 남음
		//1개월은 30일
		intervalYear="";
	}
	
	if(intervalMonth < 1){
		intervalMonth="";
		intervalDay=daysRound;	
	}

			
	
	if(intervalYear=="")intervalYear=0; 
	if(intervalMonth=="")intervalMonth=0;
	if(intervalDay=="")intervalDay=0;
	
	if(minutesRound==""){
		HTML =secondsRound +"초 남았습니다.";
	} 

	if(days <0){
		HTML ="전역을 축하합니다.";
		intervalYear=0; 
		intervalMonth=0;
		intervalDay=0;
		hoursRound=0;
		minutesRound=0;
		secondsRound=0;
		secondsRound2=0;
		$("#displayText").html(HTML);
	}else{

		$("#displayText").html("남았습니다.");
	}

	$("#year").text(intervalYear);
	$("#month").text(intervalMonth);
	$("#day").text(intervalDay);
	$("#hour").text(hoursRound);
	$("#minute").text(minutesRound);
	$("#seconds").text(secondsRound);
	$("#seconds2").text(secondsRound2);

	newtime = window.setTimeout("getTime();", 10); 
}	

</script>





</body>
</html>
파일 다운로드