메뉴 건너뛰기

조회 수 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. 자바스크립트 아이디 기억하기 기능 구현 (쿠키저장)

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

  3. 'button', 클릭한 횟수 알아내기!

  4. No Image 19Jun
    by
    2015/06/19 Views 10741 

    핸드폰 번호 일부 마스킹크 작업 (정규식 이용)

  5. No Image 27Feb
    by
    2014/02/27 Views 10485 

    5초 후에 해당페이지로 url 옮기기

  6. No Image 17Nov
    by
    2016/11/17 Views 10323 

    JavaScript 에서 JSON 생성

  7. 자바 스크립트 confirm()함수에서 (확인,취소) -> (예,아니오)

  8. No Image 02Feb
    by
    2015/02/02 Views 10180 

    자바스크립트 영문입력, 숫자만입력, 한글만 입력, 붙여넣기 방지

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

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

  10. Javascript selectbox selected 컨트롤

  11. No Image 17Nov
    by
    2016/11/17 Views 9821 

    javascript 화면 캡쳐

  12. 'onmouseover', 마우스 오버 효과 - 글씨 바꾸기!

  13. No Image 19Jun
    by
    2015/06/19 Views 9405 

    location.href 로 새창 여는 방법 (target=_blank 효과)

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

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

  15. No Image 19Jun
    by
    2015/06/19 Views 9086 

    자바스크립트 API 문서

  16. No Image 03Feb
    by
    2015/02/03 Views 9034 

    5초후 자동으로 창닫기

  17. No Image 22Dec
    by
    2016/12/22 Views 8930 

    자바스크립트 실행 시간 측정

  18. No Image 01Mar
    by
    2014/03/01 Views 8794 

    주민등록번호로 성별/나이/연령대 구분

  19. No Image 17Mar
    by
    2014/03/17 Views 8697 

    특정부위 마우스 오버시 설명을 보여주는 소스

  20. No Image 19Jun
    by
    2015/06/19 Views 8577 

    마우스 드래그, 오른쪽 팝업메뉴, 선택 막기 (IE11, 파이어폭스, 크롬 확인)

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

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved