<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test025.html</title>
<style type="text/css">
input {
font-family: 나눔고딕코딩;
font-weight: bold;
}
input:focus {
background-color: #eeeedd;
}
input:btn {
width: 80px;
font-weight: bold;
font-family: 맑은 고딕
}
input.btn:hover {
color: orange;
}
td {
text-align: center;
}
.txt {
text-align: center;
border-radius: 4px;
}
.txtScore {
text-align: right;
border-radius: 4px;
}
.txtResult {
color: red;
}
</style>
<script type="text/javascript">
/*
function actionCalendar()
{
//입력한 년,월 가져오는 부분
var year = Number(document.getElementById("textYear").value);
var month = Number(document.getElementById("textMonth").value);
//alert(year+"-"+month);
//alert(year+month);
if(year<1 || month<1 || month>12)
{
alert("입력한 년 또는 월이 유효하지 않음 ~!!!");
}
//1.단계 : 1년1월1일부터 입력 년도의 전년도 12월31일 까지의 총 날자 수 구함.
// Math.floor() ->소수부 절삭 ==같은 기능으로는 parseInt()존재. (나눗셈일 경우 처리)
// Math.ceil() ->소수부 올림
// Math.round() ->소수부 반올림
// year : 입력년도 -1: 이전년도
var total=0;
total=(year-1)*365 + parseInt((year-1)/4) -parseInt((year-1)/100) + parseInt((year-1)/400);
//확인
//alert("1년 1월 1일 ~ " + (year-1)+"년 12월 31일"+total);
// -> 1년 1월 1일 ~ 2018년 12월 31일737059
//2.단계 : 해당년 1월 1일부터 .... 해당년 해당월 1일 까지의 총 날짜 수 구함.
var m=[31,28,31,30,31,30,31,31,30,31,30,31];
//alert(m.length);
for(var i=0; i<month-1;i++)//입력받은 월의 -1
{
total +=m[i];
}
total++;
if(month>=3 && (year%4==0 && year%100!=0 || year%400==0))
{
total++; //위의 경우라면 total 1 증가
}
//3단계 : 해당년 해당월의 첫 날(1일)의 요일 구함.
var days = total%7;
//확인
//alert(days);
// 0이면 일요일 7이면 토요일
//4단계 : 해당년 해당월의 마지막 날짜 구함
var lastDay = m[month-1];
//위에서 m[0]=31 즉 1월이 0월(m[0])이므로 -1을 해준다.
if(month==2 && (year%4==0 && year%100!=0 || year%400==0)) //2월일경우 다시 조건문을 통해 확인 이유:103번째줄에서 값을 세팅한게 아니라 1만
//증가시켰기때문에 만일 조건문을 거치지 않으면 2월은 모두 28일로 출력되기 때문이다.
{
lastDay=29;
}
//5단계. 해당년 해당월 기준 달력 구성
var tableNode=document.getElementById("calendarTbl");
var trNode=document.createElement("tr"); //<tr></tr>
//빈칸 td들을 채워야함 1일이 등장하기 전까지의 요일들에 대해서.
//1일을 찍은 후 부터 td를 증가시켜 찍는다.
//해당월의 1일이 ㅅ ㅣ작되기 전의 빈 칸 td 채우는 부분
for(var i=0; i<days; i++)
{
trNode.appendChild(createTdNode(""));
}
//1일부터 ... 해당 월의 마지막 날짜까찌 td채우는 부분
var d=1;
for(d=1; d<=lastDay; d++)
{
trNode.appendChild(createTdNode(d));
}
tableNode.appendChild(trNode);
function createTdNode(val)
{
var textNode=document.createTextNode(val);
var tdNode = document.createElement("td"); //<td></td>
tdNode.appendChild(textNode);
return tdNode;
}
-----------------------------------------------------------------------------------------------------------①
*/
//다시 새롭게 다른것으로 시작
//
//입력한 년,월 가져오는 부분
/*
var year = Number(document.getElementById("textYear").value);
var month = Number(document.getElementById("textMonth").value);
//alert(year+"-"+month);
//alert(year+month);
/* if(year<0)
{
alert("입력 년도 이상 ~!!!");
return;
}
if(month<0 || month>12)
{
alert("입력 월 이상~!!!");
return;
}
if(year<1 || month<1 || month>12)
{
alert("입력한 년 또는 월이 유효하지 않음 ~!!!");
}
//1.단계 : 1년1월1일부터 입력 년도의 전년도 12월31일 까지의 총 날자 수 구함.
// Math.floor() ->소수부 절삭 ==같은 기능으로는 parseInt()존재. (나눗셈일 경우 처리)
// Math.ceil() ->소수부 올림
// Math.round() ->소수부 반올림
// year : 입력년도 -1: 이전년도
var total=0;
total=(year-1)*365 + parseInt((year-1)/4) -parseInt((year-1)/100) + parseInt((year-1)/400);
//확인
//alert("1년 1월 1일 ~ " + (year-1)+"년 12월 31일"+total);
// -> 1년 1월 1일 ~ 2018년 12월 31일737059
//2.단계 : 해당년 1월 1일부터 .... 해당년 해당월 1일 까지의 총 날짜 수 구함.
var m=[31,28,31,30,31,30,31,31,30,31,30,31];
//alert(m.length);
for(var i=0; i<month-1;i++)//입력받은 월의 -1
{
total +=m[i];
}
total++;
if(month>=3 && (year%4==0 && year%100!=0 || year%400==0))
{
total++; //위의 경우라면 total 1 증가
}
//3단계 : 해당년 해당월의 첫 날(1일)의 요일 구함.
var days = total%7;
//확인
//alert(days);
// 0이면 일요일 7이면 토요일
//4단계 : 해당년 해당월의 마지막 날짜 구함
var lastDay = m[month-1];
//위에서 m[0]=31 즉 1월이 0월(m[0])이므로 -1을 해준다.
if(month==2 && (year%4==0 && year%100!=0 || year%400==0)) //2월일경우 다시 조건문을 통해 확인 이유:103번째줄에서 값을 세팅한게 아니라 1만
//증가시켰기때문에 만일 조건문을 거치지 않으면 2월은 모두 28일로 출력되기 때문이다.
{
lastDay=29;
}
//5단계. 해당년 해당월 기준 달력 구성
var tableNode=document.getElementById("calendarTbl");
var trNode=document.createElement("tr"); //<tr></tr>
//빈칸 td들을 채워야함 1일이 등장하기 전까지의 요일들에 대해서.
//1일을 찍은 후 부터 td를 증가시켜 찍는다.
//해당월의 1일이 ㅅ ㅣ작되기 전의 빈 칸 td 채우는 부분
for(var i=0; i<days; i++)
{
trNode.appendChild(createTdNode(""));
}
//1일부터 ... 해당 월의 마지막 날짜까찌 td채우는 부분
var d=1;
for(d=1; d<=lastDay; d++)
{
trNode.appendChild(createTdNode(d));
}
//일요일을 그리기 시작할 때...
//기존 tr구성을 마무리하고
//다시 새로운 tr을 구성하는 부분
//현재는 d값만 증가 days는 그대로 요일을 알아내기 위해 증가하는 d와 고정인 days를 더한뒤 %7로 나눔.
if( (d+days)%7==0 ) //일요일을 그리기 전에...
{
tableNode.appendChild(trNode);
trNode = document.createElement("tr"); //</tr><tr>하는 과정 그 중간 사이에 appendChild하는 과정이 있는것임.
}
function createTdNode(val)
{
var textNode=document.createTextNode(val);
var tdNode = document.createElement("td"); //<td></td>
tdNode.appendChild(textNode);
return tdNode;
}
*/
//---------------------------------------------------------------------------------------------------------------②
function actionCalendar()
{
var year = Number(document.getElementById("textYear").value);
var month = Number(document.getElementById("textMonth").value);
//alert(year+"-"+month);
//alert(year+month);
/*
if(year<0)
{
alert("입력 년도 이상 ~!!!");
return;
}
if(month<0 || month>12)
{
alert("입력 월 이상~!!!");
return;
}
*/
if(year<1 || month<1 || month>12)
{
alert("입력한 년 또는 월이 유효하지 않음 ~!!!");
}
//1.단계 : 1년1월1일부터 입력 년도의 전년도 12월31일 까지의 총 날자 수 구함.
// Math.floor() ->소수부 절삭 ==같은 기능으로는 parseInt()존재. (나눗셈일 경우 처리)
// Math.ceil() ->소수부 올림
// Math.round() ->소수부 반올림
// year : 입력년도 -1: 이전년도
var total=0;
total=(year-1)*365 + parseInt((year-1)/4) -parseInt((year-1)/100) + parseInt((year-1)/400);
//확인
//alert("1년 1월 1일 ~ " + (year-1)+"년 12월 31일"+total);
// -> 1년 1월 1일 ~ 2018년 12월 31일737059
//2.단계 : 해당년 1월 1일부터 .... 해당년 해당월 1일 까지의 총 날짜 수 구함.
var m=[31,28,31,30,31,30,31,31,30,31,30,31];
//alert(m.length);
for(var i=0; i<month-1;i++)//입력받은 월의 -1
{
total +=m[i];
}
total++;
if(month>=3 && (year%4==0 && year%100!=0 || year%400==0))
{
total++; //위의 경우라면 total 1 증가
}
//3단계 : 해당년 해당월의 첫 날(1일)의 요일 구함.
var days = total%7;
//확인
//alert(days);
// 0이면 일요일 7이면 토요일
//4단계 : 해당년 해당월의 마지막 날짜 구함
var lastDay = m[month-1];
//위에서 m[0]=31 즉 1월이 0월(m[0])이므로 -1을 해준다.
if(month==2 && (year%4==0 && year%100!=0 || year%400==0)) //2월일경우 다시 조건문을 통해 확인 이유:103번째줄에서 값을 세팅한게 아니라 1만
//증가시켰기때문에 만일 조건문을 거치지 않으면 2월은 모두 28일로 출력되기 때문이다.
{
lastDay=29;
}
//5단계. 해당년 해당월 기준 달력 구성
var tableNode=document.getElementById("calendarTbl");
var trNode=document.createElement("tr"); //<tr></tr>
//빈칸 td들을 채워야함 1일이 등장하기 전까지의 요일들에 대해서.
//1일을 찍은 후 부터 td를 증가시켜 찍는다.
//해당월의 1일이 ㅅ ㅣ작되기 전의 빈 칸 td 채우는 부분
for(var i=0; i<days; i++)
{
trNode.appendChild(createTdNode(""));
}
//1일부터 ... 해당 월의 마지막 날짜까찌 td채우는 부분
var d=1;
for(d=1; d<=lastDay; d++)
{
trNode.appendChild(createTdNode(d));
}
//일요일을 그리기 시작할 때...
//기존 tr구성을 마무리하고
//다시 새로운 tr을 구성하는 부분
//현재는 d값만 증가 days는 그대로 요일을 알아내기 위해 증가하는 d와 고정인 days를 더한뒤 %7로 나눔.
if( (d+days)%7==0 ) //일요일을 그리기 전에...
{
tableNode.appendChild(trNode);
trNode = document.createElement("tr"); //</tr><tr>하는 과정 그 중간 사이에 appendChild하는 과정이 있는것임.
}
//마지막 빈 칸 td채우는 부분
//위에서 증감식에 마지막어 어찌됐든 d가 마지막으로 1증가 됐으므로 d-1을 해줘야한다.
if( ((d-1)+days)%7 !=0 )
{
for(var i=0;i<7; i++, d++)
{
trNode.appendChild(createTdNode(""));
//반복문 그만 돌라는 구성
if( (d+days)%7==0 )
{
tableNode.appendChild(trNode);
break;
}
}
}
tableNode.appendChild(trNode);
//---------------------------------------------------------------------------------------------③
function createTdNode(val)
{
var textNode=document.createTextNode(val);
var tdNode = document.createElement("td"); //<td></td>
tdNode.appendChild(textNode);
return tdNode;
}
}
</script>
</head>
<body>
<!--
만년달력 페이지를 구성한다.
테이블 태그의 동적 생성 구문을 활용한다.
1단계. 1년 1월 1일 부터... 전년도 12월 31일 까지의 총 날짜 수 구함
2단계. 해당년 1월 1일 부터 해당년 해당원 1일까지의 총 날짜 수 구함
3단계. 해당년 해당원을 첫날의 요일 구함
4단계 해당년 해당월의 마지막 날짜 구함
5단계 해당년 해당월 기준 달력 구성
-->
<div>
<h1>테이블 동적 생성으로 만년달력 그리기</h1>
<hr>
</div>
<div>
<form>
<input type="text" id="textYear" class="txt" style="width:67px;"> 년
<input type="text" id="textMonth" class="txt" style="width:67px;"> 월
<br><br>
<button type="button" class="btn" style="width:200px;" onclick="actionCalendar()">만년달력 그리기</button>
<br><br>
<table border="1" id="calendarTbl">
<tr>
<th>일</th>
<th>월</th>
<th>화</th>
<th>수</th>
<th>목</th>
<th>금</th>
<th>토</th>
</tr>
</table>
</form>
</div>
</body>
</html>