摘要：效果圖如下代碼日第一個(gè)參數(shù)代表是否是今天的日歷，如果第一個(gè)參數(shù)為，還需要傳遞倆個(gè)參數(shù)，年和月。如何制作控制月份的控件方法如下得到頁(yè)面上的對(duì)象控件。

效果圖如下：

html代碼

    -
    
2017/12
    +


    

    

        
1
2
3
4
5
6
日
    
    
    

    

css代碼

table{
    width: 300px;
    border-collapse:collapse;
}
th{
    border-bottom: 2px solid springgreen;
}
td{
    text-align: center;
    color: #999;
}
.this-month{
    color: #333;
}
.today{
    color: crimson;
}
.date-control{
    width: 300px;
    height: 20px;
    background: silver;
    position: relative;
}
.date-control p{
    text-align: center;
    line-height: 20px;
    color: #fff;
}
#pre-month,#next-mont{
    display: block;
    height: 20px;
    width: 20px;
    color: #fff;
    position: absolute;
    top: 0;
    text-align: center;
    background: #01cd78;
    cursor: pointer;
    user-select: none;
}
#pre-month{
    left: 0;
}
#next-mont{
    right: 0;
}

js代碼

function Calendar() {
    this.today = new Date();
    this.table = document.getElementById("date-table").getElementsByTagName("tbody")[0];
    this.preMontBtn = document.getElementById("pre-month");
    this.nextMontBtn = document.getElementById("next-mont");
    this.yearText = document.getElementById("table-year");
    this.monthText = document.getElementById("table-month");
}
Calendar.prototype={
    constructor:Calendar,
    calendarInit:function (_isToday,_y,_m) {
        if(_isToday){
            this.drawTable(this.today.getFullYear(),this.today.getMonth());
            this.titleInit(this.today.getFullYear(),this.today.getMonth()+1);
        }else {
            this.drawTable(_y,_m-1);
            this.titleInit(_y,_m)
        }
        this.btnListener();
    },
    getMontInfo:function (_year,_month) {
        var firstDate = new Date(_year,_month,1);
        var lastDate = new Date(_year,_month+1,0);
        return {
            firstDay:firstDate.getDay()===0?7:firstDate.getDay(),
            lastDay:lastDate.getDay()===0?7:lastDate.getDay(),
            days:lastDate.getDate()
        }
    },
    drawTable:function (_year,_month) {
        this.table.innerHTML = "";
        var allDayNum = this.getDateNum(_year,_month);
        var rows = allDayNum.length/7;
        var index = 0;
        for(var i=0;i
知識(shí)點(diǎn)：
1、獲得今天的日期對(duì)象：var today = new Date();
2、獲得某一月第一天和最后一天的日期對(duì)象：
var firstDate = new Date(_year,_month,1);//指定（年）月，第一天的日期對(duì)象
var lastDate = new Date(_year,_month+1,0);//指定（年）月，最后一天的日期對(duì)象
3、查看日期對(duì)象的相關(guān)信息：
假設(shè)d是一個(gè)日期對(duì)象（如：var d = new Date()，或，var d=new Date(2017,12,17)）
d.getFullYear();//獲得d對(duì)應(yīng)的年
d.getMonth();//獲得d對(duì)應(yīng)的月
d.getDate();//獲得d對(duì)應(yīng)的星期
4、查看日期對(duì)象的信息：
d.toLocaleString()//打印結(jié)果為：2017/12/16 上午9:55:26
思路概要：（逆向）
結(jié)果為：繪制日歷
繪制table頭部，星期123457
繪制日期數(shù)字
得到日期數(shù)字?jǐn)?shù)組
知道這個(gè)月有幾天，第一天星期幾，最后一天星期幾（從而，得到日期數(shù)組）。
方法解析：
1、如何知道某個(gè)月有多少天，第一天星期幾，最后一天星期幾？
方法如下：
function getThisMontInfo(_year,_month) {
    var firstDate = new Date(_year,_month,1);//當(dāng)前月第一天
    var lastDate = new Date(_year,_month+1,0);//當(dāng)前月最后一天
    return {//返回一個(gè)對(duì)象
        firstDay:firstDate.getDay()===0?7:firstDate.getDay();//當(dāng)前月第一天的星期（星期日為0，如果其為零，讓其變?yōu)?）、
        lastDay:lastDate.getDay()===0?7:lastDate.getDay(),//當(dāng)前月最后一天的星期
        days:lastDate.getDate()//當(dāng)前月有多少天，即最后一天的日期。
    }
}
2、如何獲得日期數(shù)組？
方法如下：
//前提知道年和月，即y和m
//利用了上面的方法
thisMonthInfo = getThisMontInfo(y,m);//當(dāng)前月相關(guān)信息
preMontInfo = getThisMontInfo(y,m-1);//上個(gè)月的相關(guān)信息
var allDayNum = [];
//向數(shù)組中添加當(dāng)前月日期。
for(i=0;i

如何繪制table？
步驟為：
1、計(jì)算需要繪制多少行tr
2、繪制對(duì)應(yīng)行數(shù)的tr
3、在每行tr中繪制7個(gè)td
4、在td中添加數(shù)字
5、用css區(qū)分這個(gè)月的日期數(shù)字和上個(gè)月或下個(gè)月的日期數(shù)字。
方法如下：
function drawTable(_year,_month) {
    table.innerHTML = "";
    var allDayNum = getDateNum(_year,_month);//通過上面的方法獲得了日期數(shù)組
    var rows = allDayNum.length/7;//計(jì)算需要繪制多少行tr
    var index = 0;//日期數(shù)組的坐標(biāo)
    for(var i=0;i
如何制作控制月份的控件？
方法如下：
//得到頁(yè)面上的對(duì)象控件。
var preMontBtn = document.getElementById("pre-month");
var nextMontBtn = document.getElementById("next-mont");
//為控件添加監(jiān)聽事件
preMontBtn.addEventListener("click",function () {
//獲得頁(yè)面上顯示的年月
    var dateInfo = {
        year:document.getElementById("table-year").innerText*1,
        month:document.getElementById("table-month").innerText*1
    };
//計(jì)算上個(gè)月的年和月
    var newDateInfo = {
        year:dateInfo.month-1===0?dateInfo.year-1:dateInfo.year,
        month:dateInfo.month-1===0?12:dateInfo.month-1
    };
//修改頁(yè)面上的年月信息
    document.getElementById("table-year").innerText = newDateInfo.year;
    document.getElementById("table-month").innerText = newDateInfo.month;
//重新繪制表格，利用的是上文的方法
    drawTable(newDateInfo.year,newDateInfo.month-1);
});
//對(duì)下個(gè)月按鈕的監(jiān)聽
nextMontBtn.addEventListener("click",function () {
    var dateInfo = {
        year:document.getElementById("table-year").innerText*1,
        month:document.getElementById("table-month").innerText*1
    };
    var newDateInfo = {
        year:dateInfo.month+1===13?dateInfo.year+1:dateInfo.year,
        month:dateInfo.month+1===13?1:dateInfo.month+1
    };
    document.getElementById("table-year").innerText = newDateInfo.year;
    document.getElementById("table-month").innerText = newDateInfo.month;
    drawTable(newDateInfo.year,newDateInfo.month-1);
});
完整代碼在開篇。