使用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代码

复制格式化注释注释清空

放大

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS日历</title>
<style type="text/css">
*{ margin:0; padding:0;}
.red{ color:red;}
.date{ cursor:pointer;}
.today{ background:#F90; font-weight:bold;cursor:pointer;}
#calendar{ width:260px; margin:50px auto; }
#date{ text-align:center; border:1px #ccc solid; border-bottom:0;} 	
#date a{ display:inline-block; width:18px; height:20px; background-position:center -20px; vertical-align:middle; cursor:pointer;}
#date #selectDate{ width:120px;display:inline-block;}
#preYear{ background:url();}
#preMonth{ background:url();}
#nextMonth{ background:url();}
#nextYear{ background:url();}
#calTable{ width:100%; border-collapse:collapse;}
#calTable th,#calTable td{ width:30px; height:20px; border:1px #ccc solid; text-align:center;}
#calTable tbody{ font-family:Georgia, "Times New Roman", Times, serif;}
</style>
</head>
<body>
<div id="calendar">
	<div id="date">
    	<a id="preMonth" title="上一年"></a>
        <a id="preYear" title="上一月"></a>
        <span id="selectDate">
            <select id="selectYear">	
            </select>
            <select id="selectMonth">
                <option value="1">1月</option>
                <option value="2">2月</option>
                <option value="3">3月</option>
                <option value="4">4月</option>
                <option value="5">5月</option>
                <option value="6">6月</option>
                <option value="7">7月</option>
                <option value="8">8月</option>
                <option value="9">9月</option>
                <option value="10">10月</option>
                <option value="11">11月</option>
                <option value="12">12月</option>
            </select>
        </span>
        <a id="nextYear" title="下一月"></a>
        <a id="nextMonth" title="下一年"></a>
    </div>
    <table id="calTable">
    	<thead>
            <tr>
                <th class="red">日</th>
                <th>一</th>
                <th>二</th>
                <th>三</th>
                <th>四</th>
                <th>五</th>
                <th class="red">六</th>
            </tr>
        </thead>
        <tbody>
        	<tr>
            	<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
            	<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
            	<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
            	<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
            	<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
            	<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
        </tbody>
    </table>
</div>
<script type="text/javascript">
var doc=document;
function Calendar(){
	this.init.apply(this,arguments);
}
Calendar.prototype={
	init:function(tableId,dateId,selectY,selectM,startYear,endYear){
		var table=doc.getElementById(tableId);
		var dateObj=doc.getElementById(dateId);
		var selectY=doc.getElementById(selectY);
		var selectM=doc.getElementById(selectM);
		this._setSelectYear(selectY,startYear,endYear);
		this._setTodayDate(table,selectY,selectM);
		this._selectChange(table,selectY,selectM);
		this._clickBtn(table,dateObj,selectY,selectM,startYear,endYear);
	},
	//设置年份
	_setSelectYear:function(selectY,startYear,endYear){
		var html="";
		var date=new Date();
		if(!endYear){
			var endYear=date.getFullYear();
		}else{
			var endYear=endYear;	
		}
		for(var i=startYear;i<=endYear;i++){
			var _option=document.createElement('option');
			selectY.appendChild(_option);
			_option.value=i;
			_option.innerHTML=i;
		}
	},
	//设置当天的时间
	_setTodayDate:function(table,selectY,selectM){
		var _this=this;
		var date=new Date();
		var year=date.getFullYear(),month=date.getMonth(),_date=date.getDate(),day=date.getDay();
		var n=parseInt(_date/7);
		var l=n%7;
		
		if(l>=day){
			var todayTd=day+7*l;
		}else{
			var todayTd=day+7*(l+1);
		}
		var startTd=todayTd-_date+1;
		var monthDays=this._getMonthDays(year,month);
		var td=table.getElementsByTagName('td');
		this._setSelectValue(selectY,year);
		this._setSelectValue(selectM,month+1);
		for(i=startTd,len=td.length;i<len;i++){
			var _td=td[i];	
			var j=i-startTd+1
			_td.innerHTML=j;
			_td.className="date";
			if(j==_date){
				_td.className="today";
			}else{
				_this._mouseOn(_td);
			}
			if(j>=monthDays){
				break;
			}
		}
	},
	//鼠标移入移出日期
	_mouseOn:function(obj){
		obj.onmouseover=function(){
			if(this.innerHTML){
				this.style.background="#bbb";	
			}
		}
		obj.onmouseout=function(){
			this.style.	background="";
		}
	},
	//下拉菜单选择日期
	_selectChange:function(table,selectY,selectM){
		var _this=this;
		selectY.onchange=function(){
			var year=_this._getSelectValue(selectY);
			var month=_this._getSelectValue(selectM)-1;
			_this._showCalendar(table,year,month);
		}
		selectM.onchange=function(){
			var year=_this._getSelectValue(selectY);
			var month=_this._getSelectValue(selectM)-1;;
			_this._showCalendar(table,year,month);
		}
	},
	//获取下拉菜单的默认值
	_getSelectValue:function(selectObj){
		var selectList=selectObj.getElementsByTagName('option');
		for(var i=0,len=selectList.length;i<len;i++){
			var _option=selectList[i];
			if(_option.selected){
				return parseInt(_option.value);
			}
		}
	},
	//设置下拉菜单默认值
	_setSelectValue:function(selectObj,value){
		var selectList=selectObj.getElementsByTagName('option');
		for(var i=0,len=selectList.length;i<len;i++){
			var _option=selectList[i];
			if(parseInt(_option.value)==value){
				_option.selected=true;
				break;
			}
		}
	},
	_clickBtn:function(table,dateObj,selectY,selectM,startYear,endYear){
		var _this=this,year=0;
		var btn=dateObj.getElementsByTagName('a');
		btn[0].onclick=function(){
			year=_this._getSelectValue(selectY)-1;
			var month=_this._getSelectValue(selectM);
			if(!isYearOver(year)){
				return;
			}
			_this._setSelectValue(selectY,year);
			_this._setSelectValue(selectM,month);
			_this._showCalendar(table,year,month-1);
		}
		btn[1].onclick=function(){
			year=_this._getSelectValue(selectY);
			var month=_this._getSelectValue(selectM)-1;
			if(month<=0){
				month=12;
				year--;
			}
			if(!isYearOver(year)){
				return;
			}
			_this._setSelectValue(selectM,month);
			_this._setSelectValue(selectY,year);
			_this._showCalendar(table,year,month-1);
		}
		btn[2].onclick=function(){
			year=_this._getSelectValue(selectY);
			var month=_this._getSelectValue(selectM)+1;
			if(month>12){
				month=1;
				year++;
			}
			if(!isYearOver(year)){
				return;
			}
			_this._setSelectValue(selectM,month);
			_this._setSelectValue(selectY,year);
			_this._showCalendar(table,year,month-1);
		}
		btn[3].onclick=function(){
			year=_this._getSelectValue(selectY)+1;
			var month=_this._getSelectValue(selectM);
			if(!isYearOver(year)){
				return;
			}
			_this._setSelectValue(selectM,month);
			_this._setSelectValue(selectY,year);
			_this._showCalendar(table,year,month-1);
		}
		function isYearOver(year){
			var date=new Date();
			var _endYear=endYear?endYear:date.getFullYear();
			if(year>_endYear||year<startYear){
				alert("超出日期范围");
				return false;;
			}else{
				return true;	
			}
		}
	},
	//显示日历
	_showCalendar:function(table,year,month){
		var date=new Date();
		var _year=date.getFullYear();
		var _month=date.getMonth();
		var _date=date.getDate();
		date.setYear(year);
		date.setMonth(month);
		date.setDate(1);
		var day=date.getDay();
		var _this=this;
		var monthDays=this._getMonthDays(year,month);
		var td=table.getElementsByTagName('td');
		for(var k=0;k<td.length;k++){
			td[k].innerHTML="";
			td[k].className="";
		}
		for(var i=day,len=td.length;i<len;i++){
			var _td=td[i];
			var j=i-day+1;
			_td.innerHTML=j;
			_td.className="date";
			if(_year==year&&_month==month&&_date==j){
				_td.className="today";
			}else{
				_this._mouseOn(_td);	
			}
			if(j>=monthDays){
				break;
			}
		}
	},
	//返回某个月的天数
	_getMonthDays:function(year,month){
		var monthAry=[31,28,31,30,31,30,31,31,30,31,30,31];
		if(year%400==0){
			monthAry[1]=29;
		}else{
			if(year%4==0&&year%100!=0){
				monthAry[1]=29;
			}
		}
		return monthAry[month];
	}
}
new Calendar("calTable","date","selectYear","selectMonth",2000,2015);
</script>
</body>
</html>

CSS代码

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

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

使用JS写的一个日历

分类

日期时间

描述

网页特效，JS日历代码，自动获取当前年、月、日，稍微扩展即可变成日历选择器，里面的背景修饰图片暂时未提供，有需要的自己制作几张小图片修饰一下。