前言
方法是有参考网上一些资料的，比如闰年的判断，比如每个月第一天是星期几的判断。不说太多，拆分出一个个函数，希望能描述尽可能的清晰明了。
一，判断闰年
//判断闰年
function runNian(_year) {
if(_year% === || (_year% === && _year% !== ) ) {
return true;
}
else { return false; }
}
二，判断某年某月的1号是星期几
//判断某年某月的1号是星期几
function getFirstDay(_year,_month) {
var allDay = , y = _year-, i = ;
allDay = y + Math.floor(y/) - Math.floor(y/) + Math.floor(y/) + ;
for ( ; i<_month; i++) {
switch (i) {
case : allDay += ; break;
case :
if(runNian(_year)) { allDay += ; }
else { allDay += ; }
break;
case : allDay += ; break;
case : allDay += ; break;
case : allDay += ; break;
case : allDay += ; break;
case : allDay += ; break;
case : allDay += ; break;
case : allDay += ; break;
case : allDay += ; break;
case : allDay += ; break;
case : allDay += ; break;
}
}
return allDay%;
}
三，创建日历表格，显示日历（表格应该在静态页面先写好结构和样式，然后在此处拼接，这里仅做示范，不附样式）
//显示日历
function showCalendar(_year,_month,_day,firstDay) {
var i = ,
monthDay = ,
showStr = "",
_classname = "",
today = new Date();
//月份的天数
switch(_month) {
case : monthDay = ; break;
case :
if(runNian(_year)) { monthDay = ; }
else { monthDay = ; }
break;
case : monthDay = ; break;
case : monthDay = ; break;
case : monthDay = ; break;
case : monthDay = ; break;
case : monthDay = ; break;
case : monthDay = ; break;
case : monthDay = ; break;
case : monthDay = ; break;
case : monthDay = ; break;
case : monthDay = ; break;
} //输出日历表格，这部分因结构而异
showStr = "<table class='cld-w'><thead>";
//日历头部
showStr += "<tr><th colspan='7'><div class='cld-hd'><span class='cld-pre'><</span><em id='showDate' value='" + _year + "-" + _month + "-" + _day + "'>" + _year + "年" + _month + "月" + _day + "日" + "</em><span class='cld-next'>></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=; i<=firstDay; i++) {
showStr += "<td></td>";
}
//显示当前月的天数
for (i=; i<=monthDay; i++) {
//当日的日期
if(_year === today.getFullYear() && _month === today.getMonth()+ && i === today.getDate()) {
_classname = "cld-cur";
}
//当日之前的日期（这个判断是因为我有工作需求，就是要求之前的日期不能点击）
else if(_year < today.getFullYear() || (_year === today.getFullYear() && _month <= today.getMonth()) || (_year === today.getFullYear() && _month === today.getMonth()+ && i < today.getDate()) ) {
_classname = "cld-old";
}
//其他普通的日期
else { _classname = "cld-day"; }
//其他大于当月的月份的相同日期（为了让点击下一月的时候，相同的日期增加cld-cur类）
if(_day === i && (_year > today.getFullYear() || _month > today.getMonth()+)) { _classname = "cld-cur"; }
//把日期存在对应的value
showStr += "<td class=" + _classname + " value='" + _year + "-" + _month + "-" + i + "'>" + i + "</td>"; firstDay = (firstDay+)%;
if(firstDay === && i !== monthDay) {
showStr += "</tr><tr>";
}
}
//剩余的空格
if(firstDay!==) {
for (i=firstDay; i<; i++) {
showStr += "<td></td>";
}
} showStr +="</tr></tbody></table>";
//插入calendar的页面结构里
calendar.innerHTML = showStr;
}
四，在日历的头部显示当前的年月日
//显示年月日
function showDate(_year,_month,_day) {
var date = "", firstDay = getFirstDay(_year,_month,_day);
if(_day !== ) {
date = _year + "年" + _month + "月" +_day + "日";
}
else { date = "No Choose."; }
document.getElementById("showDate").innerHTML = date; //日历头部显示
showCalendar(_year,_month,_day,firstDay); //调用日历显示函数
}
五，上一月和下一月
//上一月
function preMonth(_year,_month,_day) {
if(_month == ) { showDate(_year - ,,_day); }
else { showDate(_year,_month - ,_day); }
}
//下一月
function nextMonth(_year,_month,_day) {
if(_month == ) { showDate(_year + ,,_day); }
else { showDate(_year,_month + ,_day); }
}
六，初始化，日历就出来了
//初始化
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() + ,
_day = today.getDate();
var firstDay = getFirstDay(_year,_month); //显示日历
showCalendar(_year,_month,_day,firstDay);
七，日历的点击事件
//日历点击的事件委托（可以查查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[]-,dayArr[]-,dayArr[]-);
}
//如果是下一月的点击
else if ( target.className === "cld-next" ) {
nextMonth(dayArr[]-,dayArr[]-,dayArr[]-);
}
}
};
——把解释都写着代码里了，代码函数比较简单粗暴，没办法，本人对js继承封装还不熟呢。