1511
No
전역일 계산기
<!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>
댓글 ( 4)
댓글 남기기