如何用纯js写一个日历，大致情况如下

两个箭头调整月份

写得不错，css可以再设置，红色刺眼

前段时间做的一个日历效果。

var CalendarHandler = { currentYear : 0, currentMonth : 0, isRunning : false, showYearStart : 2009, tag : 0, initialize : function() { $calendarItem = this.CreateCalendar(0, 0, 0); $("#Container").append($calendarItem); $("#context").css("height", $("#CalendarMain").height() - 65 + "px"); $("#center").css("height", $("#context").height() - 30 + "px"); $("#selectYearDiv").css("height", $("#context").height() - 30 + "px").css("width", $("#context").width() + "px"); $("#selectMonthDiv").css("height", $("#context").height() - 30 + "px").css("width", $("#context").width() + "px"); $("#centerCalendarMain").css("height", $("#context").height() - 30 + "px").css("width", $("#context").width() + "px"); $calendarItem.css("height", $("#context").height() - 30 + "px"); //.css("visibility","hidden"); $("#Container").css("height", "0px").css("width", "0px").css("margin-left", $("#context").width() / 2 + "px").css("margin-top", ($("#context").height() - 30) / 2 + "px"); $("#Container").animate({ width : $("#context").width() + "px", height : ($("#context").height() - 30) * 2 + "px", marginLeft : "0px", marginTop : "0px" }, 300, function() { $calendarItem.css("visibility", "visible"); }); $(".dayItem").css("width", $("#context").width() + "px"); var itemPaddintTop = $(".dayItem").height() / 6; $(".item").css({ "width" : $(".week").width() / 7 + "px", "line-height" : itemPaddintTop + "px", "height" : itemPaddintTop + "px" }); $(".currentItem>a").css("margin-left", ($(".item").width() - 25) / 2 + "px").css("margin-top", ($(".item").height() - 25) / 2 + "px"); $(".currentItem_day>a").css("margin-left", ($(".item").width() - 25) / 2 + "px").css("margin-top", ($(".item").height() - 25) / 2 + "px"); $(".week>h3").css("width", $(".week").width() / 7 + "px"); this.RunningTime(); }, CreateSelectYear : function(showYearStart) { CalendarHandler.showYearStart = showYearStart; $(".currentDay").show(); $("#selectYearDiv").children().remove(); var yearindex = 0; for (var i = showYearStart; i < showYearStart + 12; i++) { yearindex++; if (i == showYearStart) { $last = $("<div>往前</div>"); $("#selectYearDiv").append($last); $last.click(function() { CalendarHandler.CreateSelectYear(CalendarHandler.showYearStart - 10); }); continue; } if (i == showYearStart + 11) { $next = $("<div>往后</div>"); $("#selectYearDiv").append($next); $next.click(function() { CalendarHandler.CreateSelectYear(CalendarHandler.showYearStart + 10); }); continue; } if (i == this.currentYear) { $yearItem = $("<div class=\"currentYearSd\" id=\"" + yearindex + "\">" + i + "</div>") } else { $yearItem = $("<div id=\"" + yearindex + "\">" + i + "</div>"); } $("#selectYearDiv").append($yearItem); $yearItem.click(function() { $calendarItem = CalendarHandler.CreateCalendar(Number($(this).html()), 1, 1); $("#Container").append($calendarItem); CalendarHandler.CSS() CalendarHandler.isRunning = true; $($("#Container").find(".dayItem")[0]).animate({ height : "0px" }, 300, function() { $(this).remove(); CalendarHandler.isRunning = false; }); $("#centerMain").animate({ marginLeft : -$("#center").width() + "px" }, 500); }); if (yearindex == 1 || yearindex == 5 || yearindex == 9) $("#selectYearDiv").find("#" + yearindex).css("border-left-color", "#fff"); if (yearindex == 4 || yearindex == 8 || yearindex == 12) $("#selectYearDiv").find("#" + yearindex).css("border-right-color", "#fff"); } $("#selectYearDiv>div").css("width", ($("#center").width() - 4) / 4 + "px").css("line-height", ($("#center").height() - 4) / 3 + "px"); $("#centerMain").animate({ marginLeft : "0px" }, 300); }, CreateSelectMonth : function() { $(".currentDay").show(); $("#selectMonthDiv").children().remove(); for (var i = 1; i < 13; i++) { if (i == this.currentMonth) $monthItem = $("<div class=\"currentMontSd\" id=\"" + i + "\">" + i + "月</div>"); else $monthItem = $("<div id=\"" + i + "\">" + i + "月</div>"); $("#selectMonthDiv").append($monthItem); $monthItem.click(function() { $calendarItem = CalendarHandler.CreateCalendar(CalendarHandler.currentYear, Number($(this).attr("id")), 1); $("#Container").append($calendarItem); CalendarHandler.CSS() CalendarHandler.isRunning = true; $($("#Container").find(".dayItem")[0]).animate({ height : "0px" }, 300, function() { $(this).remove(); CalendarHandler.isRunning = false; }); $("#centerMain").animate({ marginLeft : -$("#center").width() + "px" }, 500); }); if (i == 1 || i == 5 || i == 9) $("#selectMonthDiv").find("#" + i).css("border-left-color", "#fff"); if (i == 4 || i == 8 || i == 12) $("#selectMonthDiv").find("#" + i).css("border-right-color", "#fff"); } $("#selectMonthDiv>div").css("width", ($("#center").width() - 4) / 4 + "px").css("line-height", ($("#center").height() - 4) / 3 + "px"); $("#centerMain").animate({ marginLeft : -$("#center").width() * 2 + "px" }, 300); }, IsRuiYear : function(aDate) { return (0 == aDate % 4 && (aDate % 100 != 0 || aDate % 400 == 0)); }, CalculateWeek : function(y, m, d) { var arr = "7123456".split(""); with (document.all) { var vYear = parseInt(y, 10); var vMonth = parseInt(m, 10); var vDay = parseInt(d, 10); } var week = arr[new Date(y, m - 1, vDay).getDay()]; return week; }, CalculateMonthDays : function(m, y) { var mDay = 0; if (m == 0 || m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) { mDay = 31; } else { if (m == 2) { //判断是否为芮年 var isRn = this.IsRuiYear(y); if (isRn == true) { mDay = 29; } else { mDay = 28; } } else { mDay = 30; } } return mDay; }, CreateCalendar : function(y, m, d) { $dayItem = $("<div class=\"dayItem\"></div>"); //获取当前月份的天数 var nowDate = new Date(); if (y == nowDate.getFullYear() && m == nowDate.getMonth() + 1 || (y == 0 && m == 0)) $(".currentDay").hide(); var nowYear = y == 0 ? nowDate.getFullYear() : y; this.currentYear = nowYear; var nowMonth = m == 0 ? nowDate.getMonth() + 1 : m; this.currentMonth = nowMonth; var nowDay = d == 0 ? nowDate.getDate() : d; $(".selectYear").html(nowYear + "年"); $(".selectMonth").html(nowMonth + "月"); var nowDaysNub = this.CalculateMonthDays(nowMonth, nowYear); var nowWeek = parseInt(this.CalculateWeek(nowYear, nowMonth, 1)); var lastMonthDaysNub = this.CalculateMonthDays((nowMonth - 1), nowYear); if (nowWeek != 0) { //生成上月剩下的日期 for (var i = (lastMonthDaysNub - (nowWeek - 1)); i < lastMonthDaysNub; i++) { $dayItem.append("<div class=\"item lastItem\"><a>" + (i + 1) + "</a></div>"); } } //生成当月的日期 for (var i = 0; i < nowDaysNub; i++) { if (i < nowDay) { $dayItem.append("<div class=\"item currentItem\"><a>" + (i + 1) + "</a></div>"); } else if (i == nowDay) { $dayItem.append("<div class=\"item currentItem_day\"><a>" + (i + 1) + "</a></div>"); } else { $dayItem.append("<div class=\"item \"><a>" + (i + 1) + "</a></div>"); } } //获取总共已经生成的天数 var hasCreateDaysNub = nowWeek + nowDaysNub; //如果小于42，往下个月推算 if (hasCreateDaysNub < 42) { for (var i = 0; i <= (42 - hasCreateDaysNub); i++) { $dayItem.append("<div class=\"item lastItem\"><a>" + (i + 1) + "</a></div>"); } } return $dayItem; }, CSS : function() { var itemPaddintTop = $(".dayItem").height() / 6; $(".item").css({ "width" : $(".week").width() / 7 + "px", "line-height" : itemPaddintTop + "px", "height" : itemPaddintTop + "px" }); $(".currentItem>a").css("margin-left", ($(".item").width() - 25) / 2 + "px").css("margin-top", ($(".item").height() - 25) / 2 + "px"); }, CalculateNextMonthDays : function() { if (this.isRunning == false) { $(".currentDay").show(); var m = this.currentMonth == 12 ? 1 : this.currentMonth + 1; var y = this.currentMonth == 12 ? (this.currentYear + 1) : this.currentYear; var d = 0; var nowDate = new Date(); if (y == nowDate.getFullYear() && m == nowDate.getMonth() + 1) d = nowDate.getDate(); else d = 1; $calendarItem = this.CreateCalendar(y, m, d); $("#Container").append($calendarItem); this.CSS(); this.isRunning = true; $($("#Container").find(".dayItem")[0]).animate({ height : "0px" }, 300, function() { $(this).remove(); CalendarHandler.isRunning = false; }); } }, CalculateLastMonthDays : function() { if (this.isRunning == false) { $(".currentDay").show(); var nowDate = new Date(); var m = this.currentMonth == 1 ? 12 : this.currentMonth - 1; var y = this.currentMonth == 1 ? (this.currentYear - 1) : this.currentYear; var d = 0; if (y == nowDate.getFullYear() && m == nowDate.getMonth() + 1) d = nowDate.getDate(); else d = 1; $calendarItem = this.CreateCalendar(y, m, d); $("#Container").append($calendarItem); var itemPaddintTop = $(".dayItem").height() / 6; this.CSS(); this.isRunning = true; $($("#Container").find(".dayItem")[0]).animate({ height : "0px" }, 300, function() { $(this).remove(); CalendarHandler.isRunning = false; }); } }, CreateCurrentCalendar : function() { if (this.isRunning == false) { $(".currentDay").hide(); $calendarItem = this.CreateCalendar(0, 0, 0); $("#Container").append($calendarItem); this.isRunning = true; $($("#Container").find(".dayItem")[0]).animate({ height : "0px" }, 300, function() { $(this).remove(); CalendarHandler.isRunning = false; }); this.CSS(); $("#centerMain").animate({ marginLeft : -$("#center").width() + "px" }, 500); } }, RunningTime : function() { var mTiming = setInterval(function() { var nowDate = new Date(); var h = nowDate.getHours() < 10 ? "0" + nowDate.getHours() : nowDate.getHours(); var m = nowDate.getMinutes() < 10 ? "0" + nowDate.getMinutes() : nowDate.getMinutes(); var s = nowDate.getSeconds() < 10 ? "0" + nowDate.getSeconds() : nowDate.getSeconds(); var nowTime = h + ":" + m + ":" + s; }, 1000); } } $(document).ready(function(e) { CalendarHandler.initialize(); });

我去，放不下太多了。贴个效果图吧！