JavaScript实现简单的日历效果

前端之家收集整理的这篇文章主要介绍了JavaScript实现简单的日历效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

<Meta charset="UTF-8"> 日历
2015 2014 2013 2012 2011 2010 2009 2008 2007 2006 2005 2004 2003 2002 2001 2000

<script type="text/javascript">
window.onload = function() {

/**

  • 时间数组
    */
    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);
};

};

原文链接:https://www.f2er.com/js/45578.html

猜你在找的JavaScript相关文章