<HTML>
<HEAD>
<TITLE> :::: 자바스크립트 Date객체 이용하여 달력 만들기 :::: </TITLE>
<style>
td{background-color:#FFCCFF; height:40px}
</style>
<script language="JavaScript">
// 1. 현재 날짜와 시간을 구해야 한다.(여기서 구한 날짜와 시간은 전역변수)
var date = new Date();
//잠시 테스트
/*with(document)
{
write("년 : "+date.getYear()+"<br />");
write("월 : "+date.getMonth()+"<br />");
write("일 : "+date.getDate()+"<br />");
write("요일 : "+date.getDay()+"<br />");
write("시 : "+date.getHours()+"<br />");
write("분 : "+date.getMinutes()+"<br />");
write("초 : "+date.getSeconds());
}// 성공적으로 현재의 시간을 얻어왔다. 이것을 아래의 코드에서 변수에 저장*/
var now_Year = date.getYear(); //현재의 년
var now_Month = date.getMonth() + 1; //현재의 월, 0부터 시작하므로 +1
var now_Date = date.getDate(); //현재의 일
var now_Day = date.getDay(); //현재의 요일, 0부터 시작
var now_Hours = date.getHours(); //현재의 시
var now_Minutes = date.getMinutes(); //현재의 분
var now_Seconds = date.getSeconds(); //현재의 초
// 2. 이번달의 총 일수를 구해야 한다.
/*
[날짜의 규칙]
1) 매년 2월은 28일이다.
2) 매년 2월중에서 년도수가 4의 배수일 경우에는 2월이 29일이다.
3) 1월 : 31일, 2월 28일 or 29일, 3월 31일, 4월 30일, 5월 31일,
6월 30일, 7월 : 31일, 8월 31일, 9월 30일, 10월 31일, 11월 30일,
12월 31일
*/
/** 이 함수는 올해의 년과 달을 받으면 총 일수를 계산하는 함수이다. */
function getTotalDate(year, month)
{
if(month==4 || month==6 || month==9 || month==11)
return 30;
else if(month==2) //2월일때
{
if(year%4 == 0) // 2월이면서 윤년일 때
return 29;
else // 2월이면서 윤년이 아닐 때
return 28
}
else
return 31;
}//getTotalDate()======================================================================================
// 3. 이번달 시작일이 무슨요일인지 알아야 한다.
/** 이 함수는 입력받은 달의 시작일이 무슨요일인지 계산하는 함수이다.
* 일단 지금은 현재 달에 대한 시작일만 구하도록 하였다.*/
function makeStartDate(month)
{
var temp_Month = now_Month; // 전역변수의 값을 변경하지 않도록 다른변수에 값을 옮겨 넣는다.
var startDay = now_Day; //시작요일을 저장하는 변수이다. 먼저 기본값으로 현재 요일을 저장한다.
if(now_Month == month) //만약 시작일의 기준이 되는 달이 현재 달일 경우이다.
{
for( ; temp_Month >= 0 ; temp_Month--) //시작값:현지 일자, 끝깞 : 0:
{
startDay--; // -1씩 감소
if(startDay < 0) //요일은 0부터 6까지 있기 때문에 0미만으로 내려가면 한바퀴, 즉 6으로 되돌아가도록 한다.
{
startDay = 6;
}
//이 반복문에서는 현재 진행중인 일 수 만큼 반복문이 진행해야 한다.
//그리고 현재 일자가 1일일 경우에는 반복문 수행 필요없이 바로 요일을 구한다.
}
return startDay;
}
alert("입력받은 월이 당월이 아닙니다.");
}//makeStartDate()====================================================================================
// 4. 이번달 마지막일이 무슨요일인지 알아야 한다.
function makeLastDate(month)
{
var temp_Month = now_Month; // 전역변수의 값을 변경하지 않도록 다른변수에 값을 옮겨 넣는다.
var lastDay = now_Day; //시작요일을 저장하는 변수이다. 먼저 기본값으로 현재 요일을 저장한다.
if(now_Month == month) //만약 시작일의 기준이 되는 달이 현재 달일 경우이다.
{
//먼저 당월에 대한 총 일수를 구한다. 위에서 선언한 메소드를 가지고 구한다.
var totalDate = getTotalDate(now_Year, now_Month);
for( ; temp_Month <= totalDate ; temp_Month++) //시작값:현지 일자, 끝값 : 당월 마지막일
{
lastDay++; // +1씩 증가
if(totalDate > 6) //요일은 0부터 6까지 있기 때문에 6을 초과하면 0으로 초기화 해준다.(한바퀴)
{
startDay = 0;
}
}
return startDay;
}
alert("입력받은 월이 당월이 아닙니다.");
}//makeStartDate()====================================================================================
/** 이 함수는 받아온 정수값의 형태로 된 요일을 문자열로 된 요일로 변환하는 함수이다. */
function parsingDay(day)
{
if(day == 0) return "일";
else if(day == 1) return "월";
else if(day == 2) return "화";
else if(day == 3) return "수";
else if(day == 4) return "목";
else if(day == 5) return "금";
else if(day == 6) return "토";
else alert("유효하지 않은 요일값 입니다.");
}//parsingDay()===========================================================
</script>
</HEAD>
<BODY>
<table cellspacing="2" cellpadding="0" bgcolor="#ffffff" border="0"
width="70%" align="center">
<tr>
<script language="JavaScript">
document.writｅ("<td colspan='7' align='center'><b>:::: ");
document.writｅ(now_Year+"년 ");
document.writｅ(now_Month+"월 달력 ::::");
document.writｅ("</b></td>");
</script>
</tr>
<tr align="center">
<td width="14.285%"><font color="red">일</font></td>
<td width="14.285%">월</td>
<td width="14.285%">화</td>
<td width="14.285%">수</td>
<td width="14.285%">목</td>
<td width="14.285%">금</td>
<td width="14.285%"><font color="blue">토</font></td>
</tr>
<script language="JavaScript">
with(document)
{
var count = 0; // 이 변수는 현재 진행되고 있는 반복문의 요일을 계산한다.
var startDay = makeStartDate(now_Month); //당월의 시작요일을 구한다. 0부터 일요일 ...
var totalDate = getTotalDate(now_Year,now_Month); //당월의 총 일수이다.
write("<tr align='center'>");
//이 반복문은 날짜가 들어가기 전까지 공백 TD가 들어가도록 하는 반복문이다.
var previousDate = getTotalDate(now_Year,now_Month-1);//전 달의 총 일수이다.
var start_previousDate = previousDate - startDay+1;//당월 달력에서 이전달의 일자가 시작하는 수를 구한다.
for(var i=0 ; i<startDay ; i++) //위에서 여기서 1을 더해준 이유는 당월에서 날짜가 시작하는 칸을 빼야하기 때문이다.
{
write("<td><font color='white'><b>"+start_previousDate+"</b><font></td>");
start_previousDate++;
}//for()------------------------------------------------------------
//이 반복문은 실제 날짜가 들어가는 반복문이다.
for(var i=1 ; i<=totalDate ; i++)
{
if(startDay == 0) //요일이 일요일 일때 글씨색을 붉은색으로 한다.
{
write("<td><font color='red'>"+i+"</font></td>");
startDay++;
}
else if(startDay == 6) //요일이 토요일 일때 글씨색을 파란색으로 한다.
{
write("<td><font color='blue'>"+i+"</font></td>");
startDay++;
}
else //평일 일때 글씨색을 검정색으로 한다.
{
write("<td>"+i+"</td>");
startDay++;
}
if(startDay > 6) //테이블의 새로운 행을 추가하도록 한다.
{
startDay = 0;
write("</tr>");
write("<tr align='center'>");
}
}//for()------------------------------------------------------------
//이 반복문은 당월의 날짜를 모두 출력하고 남은 공백에 다음달의 일자를 표시하도록 하는 반복문이다.
for(var i=startDay ; i<=6 ; i++)
{
write("<td><font color='white'><b>"+i+"</b><font></td>");
}//for()------------------------------------------------------------
write("</tr>");
}//with()---------------------------------------------------------------
</script>
</table>
</BODY>
</HTML>
------------------------------------------------------------------------------------------
위의 코드에 대한 결과화면입니다. 따로이 직접 확인하고싶으신 분은 복사해서 실행시켜보시기
바랍니다.
-----------------------------------------------------------------------------------------
'JavaScript' 카테고리의 다른 글
| [javascript] 정수값만 입력할 수 있도록 하는 함수 (0) | 2014.07.17 |
|---|---|
| 모바일 기기로 접속할 때 모바일 페이지로 이동하는 자바스크립트 함수 (0) | 2014.07.17 |
| 자바스크립트 내장객체 Date의 메소드 (0) | 2013.08.04 |
| 자바스크립트 내장객체 Number (0) | 2013.08.04 |
| 자바스크립트 내장객체 Screen (0) | 2013.08.04 |