자바스크립트

프로그래밍/JavaScript 자바스크립트 2021. 9. 28.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style type="text/css">

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
	font-size: 14px;
	font-family: 맑은 고딕, 나눔고딕, 돋움, sans-serif;
}

#calendarLayOut {
	width: 280px;
	margin: 30px auto;
	
}

#calendarLayOut .subject {
	height: 37px;
	line-height: 37px;
	text-align: center;
	font-weight: 600;
}

#calendarLayOut table{
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

#calendarLayOut table td {
	padding: 10px;
	text-align: center;
	border: 1px solid #ccc;
}

#calendarLayOut table td:nth-child(7n+1) {
	color: red;
}

#calendarLayOut table td:nth-child(7n) {
	color: blue;
}

#calendarLayOut table td.today {
	color: blue;
	font-weight: bold;
}

#calendarLayOut table td.gray {
	color: #ccc;
}


.subject span, .footer > span {
	cursor: pointer;
}

.subject span:hover, .footer > span:hover {
	color: tomato;
}

.footer {
	height: 25px; line-height: 25px;
	text-align: right;
	font-size: 12px;
}

</style>

<script type="text/javascript">

function calendar(y, m){
	var date = new Date(y, m-1, 1);
	y = date.getFullYear();
	m = date.getMonth() + 1;
	// 위에는 우리 눈에 보이는 y, m
	
	var w = date.getDay();
	var week = ["일", "월", "화", "수", "목", "금", "토"];
	
	// 시스템 오늘 날짜
	var now = new Date();
	var ny = now.getFullYear();
	var nm = now.getMonth() + 1;
	var nd = now.getDate();
	
	// 캘린더 월 앞뒤로 변경
	var out = "<div class = 'subject'>";
	out += "<span onclick = 'calendar("+y+", "+(m-1)+")'>&lt;</span>&nbsp;&nbsp;";
	out += "<label>" + y +"년 " + m+ "월</label>"; 
	out += "&nbsp;&nbsp;<span onclick = 'calendar("+y+", "+(m+1)+")'>&gt;</span>";
	out += "</div>";
	
	out += "<table>";
	
	out += "<tr>";
	for(var i =0; i< week.length; i++){
		out+="<td>"+week[i]+"</td>";
	}
	out += "</tr>";
	
	// 1일 앞 부분 이전달
	var preDate = new Date(y, m-1, 0); // 이전달의 마지막 날짜로 Date 객체 생성
	//var preYear = preDate.getFullYear();
	//var preMonth = preDate.getFullMonth() + 1;
	var preLastDay = preDate.getDate();
	var preDay = preLastDay - w + 1;
	out += "<tr>";
	for(var i=0; i<w; i++){
		out+="<td class='gray'>"+(preDay+i)+"</td>";
	}
	
	// 년월의 마지막 날짜 구하기
	var lastDay = (new Date(y, m, 0)).getDate();
	var cls;
	for(var i=1; i<=lastDay; i++) {
		cls = "";
		if(y==ny&&m==nm&&i==nd) cls="today";
		
		out += "<td class='"+cls+"'>"+i+"</td>";
		if(i != lastDay && ++w%7==0){
			out += "</tr><tr>";
		}
	}
	
	// 마지막 날짜 부분
	var nextDay = 0;
	for(var i=w%7; i<6; i++){
		out+="<td class='gray'>"+(++nextDay)+"</td>";
	}
	
	out += "</tr>";
	
	out += "</table>";
	
	out += "<div class='footer'><span onclick='calendar("+ny+","+nm+")'>오늘날짜로</span></div>";
	
	document.getElementById("calendarLayOut").innerHTML = out;
}

window.onload = function() {
	var now = new Date();
	var y = now.getFullYear();
	var m = now.getMonth() + 1;
	calendar(y,m);
	
};


</script>
</head>
<body>

<div id="calendarLayOut"></div>

</body>
</html>

화살표 클릭으로 전달 다음달 등등 여러 달의 달력을 확인 할 수 있다.

오늘 날짜 클릭으로 원점으로 돌아올 수 도 있다.

함수 calendar은 연과 월을 인자로 입력 받아서 객체를 만들고 그걸 Date 함수로 변수 y, m을 만든다.

변수 w 는 무슨 요일인지 알기 위해서 .getDay()를 이용해서 만든다.

out에는 HTML에 들어갈 내용들을 넣는다.

HTML 내용들은 계속 추가가 되니까 out 변수에 += 을 이용해서 같은곳에 계속 넣어준다.

상단에 월을 바꾸는 화살표에 기능을 넣기 위해서 onclick를 만들고 아까 만든 calendar 함수와 연결 시켜준다.

그리고 월~일 까지 요일을 구분 표시 할 수 있게 for문을 돌린다.

out에는 테이블 표를 넣는다.

각 월의 1일의 앞 부분 생성을 위해서 저번 달의 마지막 날짜의 일자를 구한다.

var preDay = preLastDay - w + 1; = 저번달의 마지막 일자에서 달력의 나머지 칸수 채우기 위해서는

요일 만큼의 인덱스를 빼야한다 근데 빼버리면 달력 밖으로 벗어나니까 1을 더한다.

그러면 채워야 할 칸의 맨 처음 부분이 완성이 되는데 나머지 부분은 for문을 돌려서 채우면 된다.

(1씩 더해서)

이제 달력 부분으로 돌아가서 불러오는 달의 마지막 일자를 알아야하니까 구해야한다.

(new Date(y, m, 0)).getDate();를 이용해서 마지막 날짜를 구하고, for문을 돌려서

마지막 날짜 까지 일자들을 채운다.

(오늘일 경우 따로 표시를해서 변수를 빼둔다, 나중에 효과 주기 위해서)

그리고 7칸 마다 tr을 새로 만든다.

마지막 날짜 부분에서는 남은 칸수 만큼 for문을 돌린다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">

function isValidDateFormat(date){ // 날짜 형식 검사 함수
	
	if(date.length != 8 && date.length != 10) return false;
	
	var p = /(\.)|(\-)|(\/)/g;
	date = date.replace(p, "");
	
	var format = /^[12][0-9]{7}$/;
	if(! format.test(date)) return false; // test는 정규식이 올바르면 true 아니면 false
	
	var y = parseInt(date.substr(0,4));
	var m = parseInt(date.substr(4,2));
	var d = parseInt(date.substr(6));
	
	if(m<1 || m>12) return false;
	
	var lastDay = (new Date(y,m,0)).getDate();
	if(d<1 || d>lastDay) return false;
	
	return true;
	
}

// 두 날짜 사이의 간격(일자)
function toDiffDays(startDate, endDate) {
	var p = /(\.)|(\-)|(\/)/g;
	startDate = startDate.replace(p, "");
	endDate = endDate.replace(p, "");
	
	if(! isValidDateFormat(startDate))
		throw "날짜 형식이 올바르지 않습니다.";
	
	if(! isValidDateFormat(endDate))
		throw "날짜 형식이 올바르지 않습니다.";
	
	var sy = parseInt(startDate.substr(0,4));
	var sm = parseInt(startDate.substr(4,2));
	var sd = parseInt(startDate.substr(6));
	
	var ey = parseInt(endDate.substr(0,4));
	var em = parseInt(endDate.substr(4,2));
	var ed = parseInt(endDate.substr(6));
	
	var date1 = new Date(sy, sm-1, sd);
	var date2 = new Date(ey, em-1, ed);
	
	var dif = date2.getTime() - date1.getTime(); //밀리 세컨으로 나옴 1000이 1초인 개념
	
	var day = Math.floor(dif / (24*60*60*1000) ); // 일자로 계산하기 위함
	
	return day+1; // 기준일 포함할거면 +1
}

// 기준일부터 몇일째 되는 날 계산(기준일 포함)
function toDaysLater(baseDate, days) {
	var p = /(\.)|(\-)|(\/)/;
	baseDate = baseDate.replace(p, "");
	
	if( ! isValidDateFormat(baseDate))
		throw "날짜 형식이 올바르지 않습니다.";
	
	var y, m, d, s;
	y = parseInt(baseDate.substr(0, 4));
	m = parseInt(baseDate.substr(4, 2));
	d = parseInt(baseDate.substr(6)) + parseInt(days) - 1;
	
	var date = new Date(y, m-1, d);
	
	y = date.getFullYear();
	m = date.getMonth() + 1;
	if(m < 10) m = "0" + m;
	d = date.getDate();
	if(d < 10) d = "0" + d;
	
	s = y + "-" + m + "-" + d;
	
	return s;
	
	
}

// 나이 계산
function toAge(birth){
	var p = /(\.)|(\-)|(\/)/g;
	birth = birth.replace(p, "");
	
	if(! isValidDateFormat(birth)){
		throw "날짜 형식이 올바르지 않음.";
	}
	var y = parseInt( birth.substr(0, 4) );
	var m = parseInt( birth.substr(4, 2) );
	var d = parseInt( birth.substr(6) );
	var bdate = new Date(y, m-1, d);
	
	var now = new Date();
	var age = now.getFullYear() - bdate.getFullYear();
	
	if( (bdate.getMonth() > now.getMonth()) || 
			( bdate.getMonth() == now.getMonth() && bdate.getDate() > now.getDate() )) {
		age--;
	}
	
	return age;
}

// 초기화 버튼
function init() {
	
	document.getElementById("baseDate").value = "";
	document.getElementById("afterDay").value = "";
	document.getElementById("resultDate1").value = "";
	document.getElementById("afterDate").value = "";
	document.getElementById("resultDate2").value = "";
	
}

// 기준일부터 몇일째 되는 날은?
function afterDayResult() {
	
	var baseDate = document.getElementById("baseDate");
	var afterDay = document.getElementById("afterDay");
	var result = document.getElementById("resultDate1");
	
	if(! /^(\d+)$/.test(afterDay.value)){
		// \d+ 숫자 한자 이상
		alert("일자는 숫자만 가능 합니다.");
		afterDay.focus();
		return;
	}
	
	if(parseInt(afterDay.value) == 0){
		alert("0일째 되는 날은 계산되지 않습니다.");
		alert("일자는 숫자만 가능 합니다.");
		afterDay.focus();
		return;
	}
	
	try {
		
		var s = toDaysLater(baseDate.value, afterDay.value);
		result.value = s;
		
	} catch (e) {
		alert(e);
	}
	
}

// 기준일부터 특정 날짜까지 몇일 ?
function afterDateResult() {
	var baseDate = document.getElementById("baseDate");
	var afterDate = document.getElementById("afterDate");
	var result = document.getElementById("resultDate2");
	
	try {
		var s = toDiffDays(baseDate.value, afterDate.value);
		result.value = s;
	} catch (e) {
		console.log(e);
		alert("날짜 형식이 올바르지 않습니다.");
	}
}

// 만 나이 계산
function birthResult() {
	var birth = document.getElementById("birth");
	var result = document.getElementById("resultAge");
	
	try {
		var s = toAge(birth.value);
		result.value = s;
	} catch (e) {
		alert(e);
	}
}


</script>

<style type="text/css">
*{
	margin: 0; padding: 0;
    box-sizing: border-box;
}

body {
	font-size: 14px;
	font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
}
.btn {
	color: #333;
	border: 1px solid #333;
	background-color: #fff;
	padding: 4px 10px;
	border-radius: 4px;
	font-weight: 500;
	cursor:pointer;
	font-size: 14px;
	font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
	vertical-align: baseline; /* 부모 요소의 기준선에 맞춤 */
}
.btn:hover, .btn:active, .btn:focus {
	background-color: #e6e6e6;
	border-color: #adadad;
	color:#333;
}
.boxTF {
	border: 1px solid #999;
	padding: 5px 5px;
	background-color: #fff;
	border-radius: 4px;
	font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
	vertical-align: baseline;
}

.container {
	width: 450px;
	margin: 30px auto;
}

.table {
	width: 100%; border-spacing: 0; border-collapse: collapse;
}
.table th, .table td {
	padding: 5px 5px;
}

.border { border: 1px solid #ccc; }

</style>


</head>
<body>

<div class="container">
    <table class="table border">
		<tr>
		    <td colspan="2">
		        기준년월일
		    </td>
		</tr>
		<tr>
		    <td width="250" style="padding-left: 10px;">
		        <input type="text" id="baseDate" class="boxTF" style="width: 100%;"
		                   placeholder="예)20151010">
		    </td>
		    <td>
		        <button type="button" class="btn" onclick="init();">&nbsp;초기화&nbsp;</button>
		    </td>
		</tr>
		<tr>
		    <td colspan="2">
		        기준일부터
		    </td>
		</tr>
		<tr>
		    <td style="padding-left: 10px;">
		        <input type="text" id="afterDay" class="boxTF" style="width: 110px;"
		                  placeholder="예) 100">
		        <span>일째 되는 날은 ?</span>
		    </td>
		    <td>
		        <button type="button" onclick="afterDayResult();" class="btn" style="background: #5d5d5d; color: #fff;">&nbsp;계산&nbsp;</button>
		        <input type="text" id="resultDate1" class="boxTF" style="width: 90px; color: #00f; border: none;" readonly="readonly">
		    </td>
		</tr>
		<tr>
		    <td style="padding-left: 10px;">
		        <input type="text" id="afterDate" class="boxTF" style="width: 110px;"
		                   placeholder="예) 20151010">
		        <span>까지 며칠 ?</span>
		    </td>
		    <td>
		        <button type="button" onclick="afterDateResult();" class="btn" style="background: #5d5d5d; color: #fff;">&nbsp;계산&nbsp;</button>
		        <input type="text" id="resultDate2" class="boxTF" style="width: 90px; color: #00f; border: none;" readonly="readonly">
		    </td>
		</tr>
		<tr>
		    <td colspan="2">
		        <span>* 기준일을 1일로 계산</span>
		    </td>
		</tr>

		<tr style="border-top: 1px solid #ccc;">
		    <td colspan="2">
		        생년월일
		    </td>
		</tr>
		<tr>
		    <td style="padding-left: 10px;">
		        <input type="text" id="birth" class="boxTF" style="width: 110px;"
		                   placeholder="예) 20151010">
		        <span>나이는 ?</span>
		    </td>
		    <td>
		        <button type="button" onclick="birthResult();" class="btn" style="background: #5d5d5d; color: #fff;">&nbsp;계산&nbsp;</button>
		        <input type="text" id="resultAge" class="boxTF" style="width: 90px; color: #00f; border: none;" readonly="readonly">
		    </td>
		</tr>
    </table>
</div>

</body>
</html>

저작자표시

'프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글

자바스크립트 - 배열 / 객체 (2) (0)	2021.09.30
자바스크립트 - 배열 / 객체 (1) (0)	2021.09.30
자바스크립트 - Math 함수 (0)	2021.09.28
자바스크립트 - 시간 관련 함수 (Date) (0)	2021.09.28
자바스크립트 - 문자열 활용 (0)	2021.09.27

ABOUT ME

'프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바