메뉴 건너뛰기

조회 수 10063 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title> 달력만들기 </title>
<script type="text/javascript">
//<![CDATA[

function printCalendar(y, m) {    
    
    //① 현재 날짜와 현재 달에 1일의 날짜 객체를 생성합니다.
    var date=new Date(); //날짜 객체 생성
    var nowY=date.getFullYear(); //현재 연도
    var nowM=date.getMonth(); //현재 월
    var nowD=date.getDate(); //현재 일
    
    y = (y != undefined)?y:nowY;
    m = (m != undefined)?m-1:nowM;
        
    /* 현재 월의 1일에 요일을 구합니다. 
     그럼 그달 달력에 첫 번째 줄 빈칸의 개수를 구할 수 있습니다.*/

    var theDate=new Date(y, m, 1); 
    var theDay=theDate.getDay();

    //② 현재 월에 마지막 일을 구해야 합니다.

    //1월부터 12월까지 마지막 일을 배열로 저장함.
    var last=[31,28,31,30,31,30,31,31,30,31,30,31];
    /*현재 연도가 윤년(4년 주기이고 100년 주기는 제외합니다. 
    또는 400년 주기)일경우 2월에 마지막 날짜는 29가 되어야 합니다.*/

    if(y%4 == 0 && y % 100 !=0 || y%400 == 0) lastDate=last[1]=29;

    var lastDate=last[m]; //현재 월에 마지막이 몇일인지 구합니다.

    /*③ 현재 월의 달력에 필요한 행의 개수를 구합니다.
    var row(행의 개수)= Math.ceil( (theDay(빈 칸)+lastDate(월의 전체 일수)) / 7)*/


    var row=Math.ceil((theDay+lastDate)/7); //필요한 행수
    
    //④ 달력 년도/월 표기 및  달력 테이블 생성
    document.write("<h2>"+y+"."+(m+1)+"</h2>");
    //문자결합 연산자를 사용해 요일이 나오는 행을 생성    

    var calendar="<table border='1'>";
    calendar+="<tr>";
    calendar+="<th>일</th>";
    calendar+="<th>월</th>";
    calendar+="<th>화</th>";
    calendar+="<th>수</th>";
    calendar+="<th>목</th>";
    calendar+="<th>금</th>";
    calendar+="<th>토</th>";
    calendar+="</tr>";

    var dNum=1;
    //이중 for문을 이용해 달력 테이블을 생성
    for(var i=1; i<=row; i++){//행 생성 (tr 태그 생성)
    calendar+="<tr>";

    for(var k=1; k<=7; k++){//열 생성 (td 태그 생성)        
        /*행이 첫 줄이고 현재 월의 1일의 요일 이전은 모두 빈열로
        표기하고 날짜가 마지막 일보다 크면 빈열로 표기됩니다.*/

        if(i==1 && k<=theDay || dNum>lastDate){
          calendar+="<td> &nbsp; </td>";
         }else{
          calendar+="<td>"+dNum+"</td>";
           dNum++;
         }
    }
    calendar+="<tr>";
    }    

    //⑤ 문자로 결합된 달력 테이블을 문서에 출력
    document.write(calendar);
}

printCalendar();
//printCalendar(2012,2);

//]]>
</script>
</head>
<body>

</body>
</html>



  1. 이클립스 실행할때 자신이 원하는 JDK 지정하는 방법

  2. No Image 23Dec
    by
    2016/12/23 Views 5740 

    이전, 위로 이동

  3. 이벤트 - 페이지 로드 후 이벤트 처리하기 ( window.onload )

  4. No Image 17Mar
    by
    2014/03/17 Views 5518 

    이미지클릭시 옆에 큰이미지나오기

  5. No Image 01Mar
    by
    2014/03/01 Views 6923 

    이미지에 마우스 올렸을때 확대 이미지 나오게 하기 (onmouseover

  6. No Image 01Mar
    by
    2014/03/01 Views 5238 

    이미지나 태그정렬이 안맞을때 absmiddle

  7. No Image 17Mar
    by
    2014/03/17 Views 9362 

    이미지 마우스 드래그로 스크롤을 움직이는 소스

  8. No Image 01Mar
    by
    2014/03/01 Views 5205 

    이메일 체크하기

  9. No Image 01Sep
    by
    2016/09/01 Views 7166 

    이동 가능한 레이어팝업 소스

  10. No Image 16Jan
    by
    2019/01/16 Views 112099 

    유효한 링크인지 확인하는 JAVASCRIPT

  11. 유효성 검사, 모든 폼에 값이 입력되도록 해보자!

  12. No Image 24Jul
    by
    2018/07/24 Views 2294 

    유용한 스크립트 모음

  13. No Image 20Aug
    by
    2021/08/20 Views 242 

    월의 마지막 날짜 계산하기

  14. No Image 23Dec
    by
    2016/12/23 Views 5701 

    우클릭 금지

  15. No Image 25Mar
    by
    2021/03/25 Views 237 

    오브젝트 속성

  16. No Image 07Nov
    by
    2018/11/07 Views 1416 

    오늘 날짜 구하기

  17. No Image 19Jun
    by 조쉬
    2015/06/19 Views 10063 

    예제 - 자바스크립트로 현재 달의 달력 만들기 (calendar)

  18. 예제 - 이미지를 원본 크기로 볼 수 있도록 새창으로 열기 확장 (리사이징 및 이미지 드래그)

  19. No Image 01Mar
    by
    2014/03/01 Views 5292 

    영문, 숫자, 한글, 이메일 체크 하는 함수

  20. No Image 21Sep
    by
    2016/09/21 Views 7134 

    연관배열 사용하기

Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved