经典的JS日历 - 手册网

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<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="JavaScript" 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 = "&lt;&lt;"
	onclick = function() {deleteCalendar();calendar(Year-1,Month-1,new Date().getDate())}
}
with(NavSpanpM) {
	innerHTML = "&nbsp;&lt;"
	onclick = function() {deleteCalendar();calendar(Year,Month-2,new Date().getDate())}
}
with(calendarNavTD) {
	colSpan = 7;
	className = "calendarNav";
}
with(NavSpannM) {
	innerHTML = "&gt;&nbsp;"
	onclick = function() {deleteCalendar();calendar(Year,Month,new Date().getDate())}
}
with(NavSpannY) {
	innerHTML = "&gt;&gt;"
	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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

经典的JS日历

分类

日期时间

描述

分享一个经典的JS日历，从外观上来说与灰色的背景搭配得完美，国外网站搞的，只不过语言是英文，不过改为中文貌似不是难事，有需要JS日历功能的朋友，可拿去修改完善了。