JavaScript实现简单的日历效果

只是个简单的日历模板，各位可根据需要自行添加需要的功能。该模板更多的是提供了关于年、月、日、月初、月末、星期的获取函数。各位可根据需要自行获取。欢迎提供更简便的方式方法，互相学习提高！谢谢~~

rush:js;"> <Meta charset="UTF-8"> 日历

日 2015 2014 2013 2012 2011 2010 2009 2008 2007 2006 2005 2004 2003 2002 2001 2000

← →

/**

时间数组
*/
Date.prototype.toArray = function()
{
var Now = this;
var dateAry = Array();
dateAry[0] = Now.getFullYear();
dateAry[1] = (Now.getMonth()+1<10?"0":"")+(Now.getMonth()+1);
dateAry[2] = (Now.getDate()<10?"0":"")+Now.getDate();
dateAry[3] = (Now.getHours()<10?"0":"")+Now.getHours();
dateAry[4] = (Now.getMinutes()<10?"0":"")+Now.getMinutes();
dateAry[5] = (Now.getSeconds()<10?"0":"")+now.getSeconds();
dateAry[6] = now.getDay();
return dateAry;
};

/**

当月最大天数
*/
function getMaxDayOfMonth(iYear,iMonth) {
var newDate = new Date(iYear,iMonth,0);
var dateAry = newDate.toArray();
return parseInt(dateAry[2]);
};

/**

当月第一天是周几
*/
function getFirstDay(iYear,1);
var dateAry = newDate.toArray();
return parseInt(dateAry[6]);
};

var tdNodes = document.getElementsByTagName("td");
var selectYearNode = document.getElementById("selectYear");
var selectMonthNode = document.getElementById("selectMonth");
var prevYearNode = document.getElementById("prevYear");
var prevMonthNode = document.getElementById("prevMonth");
var nextMonthNode = document.getElementById("nextMonth");
var nextYearNode = document.getElementById("nextYear");

var now = new Date();
var ary = now.toArray();

function changeYearOrMonth(iYearDiff,iMonthDiff) {
var currentYear = parseInt(selectYearNode.innerHTML);
var currentMonth = parseInt(selectMonthNode.innerHTML);
var newDate = new Date(currentYear+iYearDiff,currentMonth+iMonthDiff-1,1);
var dateAry = newDate.toArray();
insertAllMonth(dateAry[0],dateAry[1]);
};

function insertAllMonth(iYear,iMonth) {
selectYearNode.innerHTML = iYear;
selectMonthNode.innerHTML = iMonth;

var firstDay = getFirstDay(iYear,parseInt(iMonth)-1);
var maxDay = getMaxDayOfMonth(iYear,iMonth);
var prevMonthMaxDay = getMaxDayOfMonth(iYear,parseInt(iMonth)-1);

var i = 0;
for(i=firstDay;i>0;i--) {
tdNodes[i-1].innerHTML = prevMonthMaxDay--;
tdNodes[i-1].className = "";
}
for(i=1+firstDay;i<=maxDay+firstDay;i++) {
tdNodes[i-1].innerHTML = i-firstDay;
if(iYear == ary[0] && iMonth == ary[1] && i-firstDay == ary[2]) {
tdNodes[i-1].className = "currentMonth currentDay";
}else if(i%7 < 2){
tdNodes[i-1].className = "currentMonth week";
}else {
tdNodes[i-1].className = "currentMonth";
}
}
var one = 1;
for(;i<=tdNodes.length;i++) {
tdNodes[i-1].innerHTML = one++;
tdNodes[i-1].className = "";
}
};

insertAllMonth(ary[0],ary[1]);

prevYearNode.onclick = function() {
changeYearOrMonth(-1,0);
};
prevMonthNode.onclick = function() {
changeYearOrMonth(0,-1);
};
nextMonthNode.onclick = function() {
changeYearOrMonth(0,1);
};
nextYearNode.onclick = function() {
changeYearOrMonth(1,0);
};

};

javascript javascript实现日历 js制作日历简单日历