고정 헤더 영역
상세 컨텐츠
본문
반응형
D-day 계산이 필요하여 간단하게 짜 보았습니다.
jquery 로 되어 있으며 시분초까지 출력하도록 하였습니다.
아래와 같은 화면으로 되어 있습니다. (입력받는 숫자의 날짜 검증은 빠져있고 단순 계산만 작성하였습니다.)
[소스]
<!doctype html>
<html lang="kr">
<head>
<meta charset="utf-8">
<title>demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready( function() {
setViewTime = function (){ //함수로 만들어 준다.
//아래 부분 입력창에서 가져오지 않고 그냥 셋팅해도 된다.
var getYear = $("#year").val();
var getMonth = $("#month").val();
var getDay = $("#day").val();
if(getYear.trim() != "" && getMonth.trim() != "" && getDay.trim() != ""){
var dat1 = new Date(); //현재날짜
var dat2 = new Date(getYear, getMonth-1, getDay); //월에서 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); //d-day 일
var hour = parseInt(diff/currHour); //d-day 시
var min = parseInt(diff/currMin); //d-day 분
var sec = parseInt(diff/currSec); //d-day 초
var viewHour = hour-(day*24);
var viewMin = min-(hour*60);
var viewSec = sec-(min*60);
//시분초 말고 일까지만 보여주면 day만 노출하면 된다.
var viewStr = day+"일 "+viewHour+"시 "+viewMin+"분 "+viewSec+"초";
$("#dateView").html("<span style='font-size: 13pt;'><b>"+viewStr+"</b></span>");
}else{
$("#dateView").html("<span style='font-size: 13pt;'><b>입력창에 날짜를 입력하세요.</b></span>");
}
}
setInterval('setViewTime()',1000);
});
</script>
</head>
<body>
<br>
<input type="text" id="year" placeholder="년도를 입력하세요."/> - <input type="text" id="month" placeholder="월을 입력하세요."/> - <input type="text" id="day" placeholder="일을 입력하세요."/>
<br>
<br>
<span style='font-size: 13pt;'><b>D-Day: </b></span><span id="dateView"/>
</body>
</html>
[실행]
아래 입력창에 년월일을 넣어보세요.
=======================================================================
- -
D-Day:
반응형
'JavaScript & HTML' 카테고리의 다른 글
| inputbox 숫자만 입력 (음수,양수) (0) | 2017.04.27 |
|---|---|
| javascript 개행 replace (javascript replace newline to br) (0) | 2017.03.17 |
| jquery 라디오버튼 선택 확인, 체크박스 선택 확인, 셀렉트박스 선택 확인 (0) | 2016.09.27 |
| input type file multiple list (파일 업로드 리스트 확인) (0) | 2016.09.19 |
| jquery 글자 byte, 문자열 byte(바이트) 길이 체크하기 예제 (1) | 2016.09.07 |
댓글 영역