黑色风格的JS日历代码，左右箭头翻页年、月

　　黑色风格的JS日历代码，通过左右箭头可翻页至某年、某月，从外观上来说与灰色的背景搭配得完美，国外网站搞的，界面语言是英文的，如果您打算用可以自己修改为中文哦，别告诉我你连12月和7个星期的英语单词也不会哦！

　　示例：

<title>经典的JS日历</title> <STYLE> body { background-color:#202020;} td { font-family:Tahoma;font-size:11px;} .calendarTable { background-color:#494949;} .calendarNav { background-color:#000000;color:white;text-align:center;height:18px;} .calendarNavEnglish { color:white;text-align:center;} .calendarNavBar { font-size:10px;cursor:hand;color:#A5BEA5;} .calendarHeadTR { background-color:#494949;text-align:center;color:#B9B9B9;height:17px;} .calendarHeadTR td { width:28px;} .calendarMainTR { background-color:#333333;text-align:center;color:#B9B9B9;height:17px;} .calendarMainTR td { width:28px;} .calendarToday { background-color: #636563;color:#FFFF00;width:90%;height:90%;font-weight:bolder;} </STYLE> <SCRIPT LANGUAGE="<b>Java</b>Script" DEFER> Date.prototype.getLastDay = function(year,month) { if(arguments.length==2) return(new Date(year,month+1,0).getDate()) else with(new Date())return(new Date(getYear(),getMonth(),0).getDate()) } Date.prototype.FirstDayofWeek = function(year,month) { if(arguments.length==2) return(new Date(year,month,1).getDay()) else with(new Date())return(new Date(getYear(),getMonth(),1).getDay()); } //Call calendar(new Date().getYear(),new Date().getMonth(),new Date().getDate()) function calendar(userY,userM,userD) { //system variable var i,j; var now = new Date(userY,userM,userD); var Year = now.getYear(); var Month = now.getMonth()+1; var LastDay = now.getLastDay(userY,userM); var FirstDayofWeek = now.FirstDayofWeek(userY,userM); var Today = now.getDate(); var MonthName = ["January","February","March","April","May","June","July","August","September","October","November","December"] var WeekName = ["Sun","Mon","Tur","Wed","Thu","Fri","Sat"] //user variable var firstDayInWeek=7 var calendarRows = 7,calendarCols=7; //user color var tableCellpadding=1,tableCellspacing=1,tableBorder=0; //append to where oWhere = document.body; //Create Table var calendarTable = document.createElement("table"); //创建导航 var calendarNavTR = calendarTable.insertRow(); var calendarNavTD = calendarNavTR.insertCell(); //嵌套表格 var NavInnerTable = document.createElement("table") var NavInnerTR = NavInnerTable.insertRow(); for (var i=0;i<3;i++)NavInnerTR.insertCell(); var NavSpanpY = document.createElement("<span>"); var NavSpanpM = document.createElement("<span>"); var NavSpannY = document.createElement("<span>"); var NavSpannM = document.createElement("<span>"); with(NavInnerTR.cells) { item([0]).appendChild(NavSpanpY); item([0]).appendChild(NavSpanpM); item([2]).appendChild(NavSpannM); item([2]).appendChild(NavSpannY); //显示英文提示 item([1]).innerText = MonthName[Month-1]+" "+Year; item([1]).width = "100%"; item([1]).className = "calendarNavEnglish"; // item([0]).className = "calendarNavBar"; item([2]).className = "calendarNavBar"; } calendarNavTD.appendChild(NavInnerTable); //创建日历头部分 var calendarMainTR = new Array(); for (i=0;i<calendarRows;i++) { calendarMainTR[i] = calendarTable.insertRow(); for (j=0;j<calendarCols;j++)calendarMainTR[i].insertCell(); } //表格属性 with(calendarTable) { cellPadding=tableCellpadding; cellSpacing=tableCellspacing; border=tableBorder; className="calendarTable"; } //导航内容 with(NavSpanpY) { innerHTML = "<<" onclick = function() {deleteCalendar();calendar(Year-1,Month-1,new Date().getDate())} } with(NavSpanpM) { innerHTML = " <" onclick = function() {deleteCalendar();calendar(Year,Month-2,new Date().getDate())} } with(calendarNavTD) { colSpan = 7; className = "calendarNav"; } with(NavSpannM) { innerHTML = "> " onclick = function() {deleteCalendar();calendar(Year,Month,new Date().getDate())} } with(NavSpannY) { innerHTML = ">>" onclick = function() {deleteCalendar();calendar(Year+1,Month-1,new Date().getDate())} } //日历头 var calendarHeadTR = calendarMainTR[0]; with(calendarHeadTR) { for (i=0;i<cells.length;i++)cells[i].innerText=WeekName[i]; className="calendarHeadTR"; } //日历主体 var k=1; for (i=1;i<calendarMainTR.length;i++) { calendarMainTR[i].className="calendarMainTR"; for(j=0;j<calendarMainTR[i].cells.length;j++) { if (i==1&&j==FirstDayofWeek) { CreateDay(); k++; } else if (k>1&&k<=LastDay) { CreateDay(); k++; } } } deleteNoneRow(); oWhere.appendChild(calendarTable); /*Function*/ //日历日期 function CreateDay() { if (k==Today) { var todaySpan = document.createElement("span"); todaySpan.className = "calendarToday"; todaySpan.innerText = k; calendarMainTR[i].cells[j].appendChild(todaySpan); } else { calendarMainTR[i].cells[j].innerText=k; } } //删除空行 function deleteNoneRow() { if(!calendarTable.rows[6].innerText)calendarTable.deleteRow(6); if(!calendarTable.rows[7].innerText)calendarTable.deleteRow(7); } //从页面里移除日历 function deleteCalendar() { if(calendarTable)calendarTable.outerHTML=""; } } </SCRIPT> <div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：云计算网_宿迁站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!