js 달력 만 들 기 (원본 JS 구현 달력)

머리말
      방법 은 인터넷 의 일부 자 료 를 참고 하 는 것 이다. 예 를 들 어 윤년 의 판단, 예 를 들 어 매달 첫날 이 무슨 요일 인지 판단 하 는 것 이다.너무 많은 것 은 말 하지 않 고 하나의 함 수 를 나 누 어 가능 한 한 명확 하 게 묘사 할 수 있 기 를 바 랍 니 다.
 윤년

//    

function runNian(_year) {

    if(_year%400 === 0 || (_year%4 === 0 && _year%100 !== 0) ) {

        return true;

    }

    else { return false; }

}

2. 어느 해 어느 달 1 일이 무슨 요일 인지 판단 합 니 다.

//       1     

function getFirstDay(_year,_month) {

    var allDay = 0, y = _year-1, i = 1;

    allDay = y + Math.floor(y/4) - Math.floor(y/100) + Math.floor(y/400) + 1;

    for ( ; i<_month; i++) {

        switch (i) {

            case 1: allDay += 31; break;

            case 2: 

                if(runNian(_year)) { allDay += 29; }

                else { allDay += 28; }

                break;

            case 3: allDay += 31; break;

            case 4: allDay += 30; break;

            case 5: allDay += 31; break;

            case 6: allDay += 30; break;

            case 7: allDay += 31; break;

            case 8: allDay += 31; break;

            case 9: allDay += 30; break;

            case 10: allDay += 31; break;

            case 11: allDay += 30; break;

            case 12: allDay += 31; break;

        }

    }

    return allDay%7;

}

3. 달력 표를 만 들 고 달력 을 표시 합 니 다.

//    

function showCalendar(_year,_month,_day,firstDay) {

    var i = 0,

        monthDay = 0,

        showStr = "",

        _classname = "",

        today = new Date();

        //     

    switch(_month) {

        case 1: monthDay = 31; break;

        case 2:

            if(runNian(_year)) { monthDay = 29; }

            else { monthDay = 28; }

            break;

        case 3: monthDay = 31; break;

        case 4: monthDay = 30; break;

        case 5: monthDay = 31; break;

        case 6: monthDay = 30; break;

        case 7: monthDay = 31; break;

        case 8: monthDay = 31; break;

        case 9: monthDay = 30; break;

        case 10: monthDay = 31; break;

        case 11: monthDay = 30; break;

        case 12: monthDay = 31; break;

    }



    //      ，        

    showStr = "<table class='cld-w'><thead>";

    //    

    showStr += "<tr><th colspan='7'><div class='cld-hd'><span class='cld-pre'>&lt;</span><em id='showDate' value='" + _year + "-" + _month + "-" + _day + "'>" + _year + " " + _month + " " + _day + " " + "</em><span class='cld-next'>&gt;</span></div></th></tr>";

    //    

    showStr += "<tr><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th></tr>";

    showStr += "</thead><tbody><tr>";

    //         

    for (i=1; i<=firstDay; i++) {

        showStr += "<td></td>";

    }

    //        

    for (i=1; i<=monthDay; i++) {

        //     

        if(_year === today.getFullYear() && _month === today.getMonth()+1 && i === today.getDate()) {

            _classname = "cld-cur"; 

        } 

        //       （             ，             ）

        else if(_year < today.getFullYear() || (_year === today.getFullYear() && _month <= today.getMonth()) || (_year === today.getFullYear() && _month === today.getMonth()+1 && i < today.getDate()) ) {

            _classname = "cld-old";

        }

        //       

        else { _classname = "cld-day"; }

        //              （           ，       cld-cur ）

        if(_day === i && (_year > today.getFullYear() || _month > today.getMonth()+1)) { _classname = "cld-cur"; }

        //        value       

        showStr += "<td class=" + _classname + " value='" + _year + "-" + _month + "-" + i + "'>" + i + "</td>";



        firstDay = (firstDay+1)%7;

        if(firstDay === 0 && i !== monthDay) {

            showStr += "</tr><tr>";

        } 

    }

    
    //      if(firstDay!==0) {

        for (i=firstDay; i<7; i++) {

            showStr += "<td></td>";

        }

    }

        

    showStr +="</tr></tbody></table>";

    //  calendar      

    calendar.innerHTML = showStr;

}

4. 달력 의 머리 에 현재 의 년 월 일 을 표시 합 니 다.

//     

function showDate(_year,_month,_day) {

    var date = "", firstDay = getFirstDay(_year,_month,_day);

    if(_day !== 0) {

        date = _year + " " + _month + " " +_day + " ";

    }

    else { date = "No Choose."; }

    document.getElementById("showDate").innerHTML = date; //      

    showCalendar(_year,_month,_day,firstDay);         //        

}

5. 지난달 과 다음 달

//   

function preMonth(_year,_month,_day) {

    if(_month == 1) { showDate(_year - 1,12,_day); }

    else { showDate(_year,_month - 1,_day); }

}

//   

function nextMonth(_year,_month,_day) {

    if(_month == 12) { showDate(_year + 1,1,_day); }

    else { showDate(_year,_month + 1,_day); }

}

6. 초기 화 하면 달력 이 나 옵 니 다.

//   

var calendar = document.createElement('div');

calendar.setAttribute('id','showCld');

document.getElementById("box").appendChild(calendar); //     box  
//         var today = new Date();

var _year = today.getFullYear(),

    _month = today.getMonth() + 1,

    _day = today.getDate();

var firstDay = getFirstDay(_year,_month);

//    

showCalendar(_year,_month,_day,firstDay); 

7. 달력 클릭 이벤트

//         （    js     ）

calendar.onclick = function(e) {

    var e = e || window.event;

    var target = e.srcElement || e.target;

//               ，      value   

    dayArr = document.getElementById('showDate').getAttribute('value').split('-');

    if (target) {

        //         

        if ( target.className === "cld-day" || target.className === "cld-cur" ) {

            dateArr = target.getAttribute('value').split('-');

            // 0            ，                
            showDate(dateArr[0]-0,dateArr[1]-0,dateArr[2]-0);

            calendar.className = "";

        } 

        //         

        else if ( target.className === "cld-pre" ) {

            preMonth(dayArr[0]-0,dayArr[1]-0,dayArr[2]-0);

        }

        //         

        else if ( target.className === "cld-next" ) {

            nextMonth(dayArr[0]-0,dayArr[1]-0,dayArr[2]-0);

        }

    }

};

 
 ——설명 을 모두 코드 에 적 었 습 니 다. 코드 함수 가 비교적 간단 하고 거 칠 어서 어 쩔 수 없습니다. 저 는 js 계승 패키지 에 대해 아직 잘 모 릅 니 다.