网页实现制作一个小日历

在网页上制作一个日历，利用jquery实现它，其实也不是很困难，参照网上的部分思想自己再深加工，一个精美的日历也就能呈现了

接下来谈谈实现它的函数思想

    var date = new Date();
    var show_day=new Array('星期日','星期一','星期二','星期三','星期四','星期五','星期六'); 
    var seperator1 = "-";
    var yearNow = date.getFullYear();
    var year = yearNow;
    var monthNow = date.getMonth() + 1;
    var month = monthNow;
    var strDateNow = date.getDate();
    var strDate=strDateNow;
    var day = date.getDay(); 
    var n1str = new Date(year, month-1, 1); // 当月第一天Date  
    var initfirstday = n1str.getDay(); // 当月第一天星期几  
    var daynumber = getMonthAllDay(month-1, year); 
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
    }
    var currentdate = year + seperator1 + month + seperator1 + strDate;
    $(".dp-input").val(currentdate);
    $(".weekinfo").text(show_day[day]);
    $('input[name="current-year"]').val(year);
    $('input[name="current-month"]').val(month);

// 是否为闰年  
function is_leap(year) {  
    return (year % 100 == 0 ? res = (year % 400 == 0 ? 1 : 0)  
            : res = (year % 4 == 0 ? 1 : 0));  
}  

// 获取当月的天数  
function getMonthAllDay(month, year) {  
    var m_days = new Array(31, 28 + is_leap(year), 31, 30, 31, 30, 31, 31, 30,  
            31, 30, 31);  
    return m_days[month];  
}  
  
// 获得某年某月某日是星期几  
function getFirstWeekDay(year, month, day) {  
    var date = new Date();  
    date.setFullYear(year);  
    date.setMonth(month);  
    date.setDate(day);  
    return date.getDay();  
} 

使用date()方法创建对象获取到当前年月，这里要注意到日的获取只能获取到当前星期的数字，并且它所获取到的月份数字比实际月份也会小一个月

/* 显示日历 */  
function showCanledar(month, firstday, dnow, allday) {  
    var rows = requiredRows(allday, firstday);  
    $(".cal-header").next().remove();
    var tb = " <table data-v-67941c3e>";   
    tb += "<thead data-v-67941c3e>";
    tb += "<tr class='datepicker-weekday' data-v-67941c3e>";
    tb += "<th data-v-67941c3e>日</th>";
    tb += "<th data-v-67941c3e>一</th>";
    tb += "<th data-v-67941c3e>二</th>";
    tb += "<th data-v-67941c3e>三</th>";
    tb += "<th data-v-67941c3e>四</th>";
    tb += "<th data-v-67941c3e>五</th>";
    tb += "<th data-v-67941c3e>六</th>";
    tb += "</tr></thead>"; 
    tb += "<tbody data-v-67941c3e>"; 
    for (var i = 0; i < rows; i++) {  
        tb += "<tr data-v-67941c3e>";  
        for (var k = 0; k < 7; k++) { // 表格每行的单元格  
            var idx = i * 7 + k; // 单元格自然序列号
            var date_str = idx - firstday + 1; // 计算日期    
            if(date_str <= 0 || date_str > allday){
                tb+="<td  class='cal-day' data-v-67941c3e></td>";
            }else if (date_str == dnow){
                tb+="<td  class='cal-day cur selectable today' data-v-67941c3e>" +date_str + "</td>";
            }else if (date_str > 0 && date_str < dnow){
                tb+="<td  class='cal-day' data-v-67941c3e>" +date_str + "</td>";
            }else{
                tb+="<td  class='cal-day cur selectable' data-v-67941c3e>" +date_str + "</td>";
            }
            // 过滤无效日期（小于等于零的、大于月总天数的）  
            // 打印日期：今天底色为红  
            // 查询月签到情况  
        }  
        tb += "</tr>";  
        // 表格的行结束  
    }  
    tb += "</tbody>"
    tb += "</table>"; // 表格结束  
    $(".cal-header").after(tb);  
}   

此处使用函数动态创建日历生成，接下来我们实现日历的月份查看

// 获得上一个改变的月  
function getPrevMonth(month,year,yearNow,monthNow) {   
        if(month == monthNow && year == yearNow) {
          
        }else if(month == 1){
           month = 12;
           year=parseInt(year)-1;
        }else {
           month=parseInt(month)-1;
           /*alert("changePrev"+month)*/
        }
   $('input[name="current-year"]').val(year);
   $('input[name="current-month"]').val(month);
}  

// 获得下一个改变的月  
function getNextMonth(month,year) {  
        if(month == 12 ){
            month = 1;
            year=parseInt(year)+1;
        }else{
            month=parseInt(month)+1;
            /*alert("changeNext"+month);*/
        }
   $('input[name="current-year"]').val(year);
   $('input[name="current-month"]').val(month);
}

函数判断当前月份是否为1月或者12月，根据月份的选择获取到对应的年份，通过动态效果实现上一个月和下一个月的查看