js插件讲解_javascript原生日历插件讲解

效果图如下：

html代码

<div class="date-control" id="date-control">

    <span id="pre-month">-</span>

    <p><span id="table-year">2017</span>/<span id="table-month">12</span></p>

    <span id="next-mont">+</span>

</div>

<table id="date-table">

    <thead>

    <tr>

        <th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>日</th>

    </tr>

    </thead>

    <tbody>

    </tbody>

</table>

<script>

var c = new Calendar();

//c.calendarInit(false,2017,11);//第一个参数代表是否是今天的日历，如果第一个参数为false，还需要传递俩个参数，年和月。

c.calendarInit(true);

</script>

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<rows;i++){

            var tr = document.createElement("tr");

            for(var j=0;j<7;j++){

                var td = document.createElement("td");

                console.log(allDayNum[index].date,index);

                td.innerText = allDayNum[index].date;

                if(allDayNum[index].info==="this month"){

                    td.className="this-month"

                }else if(allDayNum[index].info==="today"){

                    td.className="today";

                }

                tr.appendChild(td);

                index++;

            }

            this.table.appendChild(tr);

        }

    },

    getDateNum:function (_year,_month) {

        var allDayNum = [];

        var today = new Date();

        var todayInfo = {

            year:today.getFullYear(),

            month:today.getMonth(),

            date:today.getDate()

        };

        var thisMonthInfo = this.getMontInfo(_year,_month);

        var preMontInfo = this.getMontInfo(_year,_month-1);

        var info;

        for(var i=0;i<thisMonthInfo.days;i++){

            info = {

                date:i+1,

                info:"this month"

            };

            if(_year===todayInfo.year&&_month===todayInfo.month&&i+1===todayInfo.date){

                info.info = "today";

            }

            allDayNum[i]=info;

        }

        for(i=0;i<thisMonthInfo.firstDay-1;i++){

            info = {

                date:preMontInfo.days-i,

                info:"pre month"

            };

            allDayNum.unshift(info)

        }

        for(i=0;i<7-thisMonthInfo.lastDay;i++){

            info = {

                date:i+1,

                info:"next month"

            };

            allDayNum.push(info);

        }

        return allDayNum;

    },

    btnListener:function () {

        var that = this;

        that.preMontBtn.addEventListener("click",function () {

            var dateInfo = {

                year:that.yearText.innerText*1,

                month:that.monthText.innerText*1

            };

            var newDateInfo = {

                year:dateInfo.month-1===0?dateInfo.year-1:dateInfo.year,

                month:dateInfo.month-1===0?12:dateInfo.month-1

            };

            that.yearText.innerText = newDateInfo.year;

            that.monthText.innerText = newDateInfo.month;

            that.drawTable(newDateInfo.year,newDateInfo.month-1);

        });

        that.nextMontBtn.addEventListener("click",function () {

            var dateInfo = {

                year:that.yearText.innerText*1,

                month:that.monthText.innerText*1

            };

            var newDateInfo = {

                year:dateInfo.month+1===13?dateInfo.year+1:dateInfo.year,

                month:dateInfo.month+1===13?1:dateInfo.month+1

            };

            that.yearText.innerText = newDateInfo.year;

            that.monthText.innerText = newDateInfo.month;

            that.drawTable(newDateInfo.year,newDateInfo.month-1);

        });

    },

    titleInit:function (y,m) {

        this.yearText.innerText = y;

        this.monthText.innerText = m;

    }

};

知识点：

1、获得今天的日期对象：var today = new Date();

2、获得某一月第一天和最后一天的日期对象：
var firstDate = new Date(_year,_month,1);//指定（年）月，第一天的日期对象
var lastDate = new Date(_year,_month+1,0);//指定（年）月，最后一天的日期对象

3、查看日期对象的相关信息：
假设d是一个日期对象（如：var d = new Date()，或，var d=new Date(2017,12,17)）
d.getFullYear();//获得d对应的年
d.getMonth();//获得d对应的月
d.getDate();//获得d对应的星期

4、查看日期对象的信息：
d.toLocaleString()//打印结果为：2017/12/16 上午9:55:26

思路概要：（逆向）
结果为：绘制日历
绘制table头部，星期123457
绘制日期数字
得到日期数字数组
知道这个月有几天，第一天星期几，最后一天星期几（从而，得到日期数组）。

方法解析：

1、如何知道某个月有多少天，第一天星期几，最后一天星期几？

方法如下：

function getThisMontInfo(_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();//当前月第一天的星期（星期日为0，如果其为零，让其变为7）、

        lastDay:lastDate.getDay()===0?7:lastDate.getDay(),//当前月最后一天的星期

        days:lastDate.getDate()//当前月有多少天，即最后一天的日期。

    }

}

2、如何获得日期数组？

方法如下：

//前提知道年和月，即y和m

//利用了上面的方法

thisMonthInfo = getThisMontInfo(y,m);//当前月相关信息

preMontInfo = getThisMontInfo(y,m-1);//上个月的相关信息

var allDayNum = [];

//向数组中添加当前月日期。

for(i=0;i<thisMonthInfo.days;i++){//thisMonthInfo.days为指定月的天数

    allDayNum[i]=i+1;

}

//补上上个月的最后几天

for(i=0;i<thisMonthInfo.firstDay-1;i++){//thisMonthInfo.firstDay这个月第一天的星期

    allDayNum.unshift(preMontInfo.days-i)//preMontInfo.days是上个月的天数

}

//补上下个月的前几天

for(i=0;i<7-thisMonthInfo.lastDay;i++){//thisMonthInfo.lastDay这个月最后一天的星期

    allDayNum.push(i);

}

如何绘制table？

步骤为：
1、计算需要绘制多少行tr
2、绘制对应行数的tr
3、在每行tr中绘制7个td
4、在td中添加数字
5、用css区分这个月的日期数字和上个月或下个月的日期数字。
方法如下：

function drawTable(_year,_month) {

    table.innerHTML = "";

    var allDayNum = getDateNum(_year,_month);//通过上面的方法获得了日期数组

    var rows = allDayNum.length/7;//计算需要绘制多少行tr

    var index = 0;//日期数组的坐标

    for(var i=0;i<rows;i++){

        var tr = document.createElement("tr");

        for(var j=0;j<7;j++){//每行tr绘制7个td

            var td = document.createElement("td");

            td.innerText = allDayNum[index].date;//在tr中填入数字

//如果是这个月的日期，让其clss为this-month（颜色加深）

            if(allDayNum[index].info==="this month"){

                td.className="this-month"

            }else if(allDayNum[index].info==="today"){//如果日期为今天，让其颜色变红。

                td.className="today";

            }

            tr.appendChild(td);

            index++;

        }

        table.appendChild(tr);

    }

}

如何制作控制月份的控件？

方法如下：

//得到页面上的对象控件。

var preMontBtn = document.getElementById("pre-month");

var nextMontBtn = document.getElementById("next-mont");

//为控件添加监听事件

preMontBtn.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===0?dateInfo.year-1:dateInfo.year,

        month:dateInfo.month-1===0?12:dateInfo.month-1

    };

//修改页面上的年月信息

    document.getElementById("table-year").innerText = newDateInfo.year;

    document.getElementById("table-month").innerText = newDateInfo.month;

//重新绘制表格，利用的是上文的方法

    drawTable(newDateInfo.year,newDateInfo.month-1);

});

//对下个月按钮的监听

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);

});

完整代码在开篇。

巴特西

js插件讲解_javascript原生日历插件讲解

最新文章

热门文章