JavaScript实现简单的日历效果
只是个简单的日历模板，各位可根据需要自行添加需要的功能。该模板更多的是提供了关于年、月、日、月初、月末、星期的获取函数。各位可根据需要自行获取。欢迎提供更简便的方式方法，互相学习提高！谢谢~~
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>日历</title>
<styletype="text/css">
*{
cursor:default;
}
div{
overflow:hidden;
}
.mainArea{
margin:30pxauto0;
border:1pxsolid#666;
height:230px;
width:210px;
background-color:#eee;
font-family:'microsoftyahei';
}
.top{
height:30px;
background-color:#aaa;
}
.topspan{
cursor:default;
}
.topspan:hover{
background-color:red;
}
.top.selectFlagLeftspan,
.top.selectFlagRightspan{
display:block;
float:left;
line-height:30px;
text-align:center;
}
.topspan.selectFlag{
width:50%;
}
.topspan.selectYear{
width:60px;
height:30px;
display:block;
float:left;
text-align:center;
line-height:30px;
cursor:pointer;
}
.topspan.selectMonth{
display:block;
height:30px;
margin-left:60px;
text-align:center;
line-height:30px;
cursor:pointer;
}
.top.selectFlagLeft{
float:left;
width:60px;
height:30px;
}
.top.selectFlagRight{
float:right;
width:60px;
height:30px;
margin-top:-30px;
}
.top.selectMiddle{
height:30px;
margin-left:60px;
margin-right:60px;
}
.dayTb{
width:100%;
text-align:center;
border-bottom:1pxsolid#fff;
~display:none;
}
.dayTbthead{
background-color:#675;
color:#eee;
}
.dayTbtr{
height:24px;
}
.dayTbtd{
border:1pxsolid#ddd;
cursor:default;
background-color:#dadada;
font-weight:100;
color:rgba(102,102,102,0.6);
}
/*.dayTbtd:hover,*/
.dayTbtd.currentMonth:hover,
.dayTbtd.currentMonth.currentDay:hover,
.dayTbtd.currentMonth.week:hover{
background-color:#0fa;
}
.dayTbtd.currentMonth{
background-color:#c0f0f0;
color:#60f;
}
.dayTbtd.currentMonth.currentDay{
color:#f06;
}
.dayTbtd.currentMonth.week{
color:#00a080;
}
.footer{
line-height:27px;
text-align:right;
padding-right:5px;
}
.footerspan{
border:1pxsolid#bbb;
padding:2px5px;
font-size:12px;
}
.selectYears{
height:168px;
width:100%;
background-color:#333;
text-align:center;
display:none;
}
.selectYears{
color:#fff;
margin:0;
padding:0;
}
.selectYears.contentYearsspan{
font-size:16px;
padding:7px0;
width:25%;
display:block;
float:left;
}
.selectYearsspan:hover{
background-color:red;
}
.selectFooterspan{
padding:06px;
}
.selectYears.returnPage{
font-size:12px;
display:block;
float:right;
margin-top:-22px;
margin-right:10px;
padding:2px6px;
}
</style>
</head>
<body>
<divclass="mainArea">
<divclass="top">
<divclass="selectFlagLeft">
<spanclass="selectFlag"id="prevYear">◄</span>
<spanclass="selectFlag"id="prevMonth"><</span>
</div>
<divclass="selectMiddle">
<spanclass="selectYear"id="selectYear">
</span>
<spanclass="selectMonth"id="selectMonth">
</span>
</div>
<divclass="selectFlagRight">
<spanclass="selectFlag"id="nextMonth">></span>
<spanclass="selectFlag"id="nextYear">►</span>
</div>
</div>
<tableclass="dayTb"id="dayTb"border=0cellspacing=0cellpadding=0>
<thead>
<tr>
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</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>
<divclass="selectYears">
<divclass="contentYears">
<span>2015</span>
<span>2014</span>
<span>2013</span>
<span>2012</span>
<span>2011</span>
<span>2010</span>
<span>2009</span>
<span>2008</span>
<span>2007</span>
<span>2006</span>
<span>2005</span>
<span>2004</span>
<span>2003</span>
<span>2002</span>
<span>2001</span>
<span>2000</span>
</div>
<divclass="selectFooter">
<span>←</span>
<span>→</span>
</div>
<spanclass="returnPage">收起</span>
</div>
<divclass="footer">
<span>今日</span>
<span>清除</span>
<span>确定</span>
<span>返回</span>
</div>
</div>
<scripttype="text/javascript">
window.onload=function(){
/**
*时间数组
*/
Date.prototype.toArray=function()
{
varnow=this;
vardateAry=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();
returndateAry;
};
/**
*当月最大天数
*/
functiongetMaxDayOfMonth(iYear,iMonth){
varnewDate=newDate(iYear,iMonth,0);
vardateAry=newDate.toArray();
returnparseInt(dateAry[2]);
};
/**
*当月第一天是周几
*/
functiongetFirstDay(iYear,iMonth){
varnewDate=newDate(iYear,iMonth,1);
vardateAry=newDate.toArray();
returnparseInt(dateAry[6]);
};
vartdNodes=document.getElementsByTagName("td");
varselectYearNode=document.getElementById("selectYear");
varselectMonthNode=document.getElementById("selectMonth");
varprevYearNode=document.getElementById("prevYear");
varprevMonthNode=document.getElementById("prevMonth");
varnextMonthNode=document.getElementById("nextMonth");
varnextYearNode=document.getElementById("nextYear");
varnow=newDate();
varary=now.toArray();
functionchangeYearOrMonth(iYearDiff,iMonthDiff){
varcurrentYear=parseInt(selectYearNode.innerHTML);
varcurrentMonth=parseInt(selectMonthNode.innerHTML);
varnewDate=newDate(currentYear+iYearDiff,currentMonth+iMonthDiff-1,1);
vardateAry=newDate.toArray();
insertAllMonth(dateAry[0],dateAry[1]);
};
functioninsertAllMonth(iYear,iMonth){
selectYearNode.innerHTML=iYear;
selectMonthNode.innerHTML=iMonth;
varfirstDay=getFirstDay(iYear,parseInt(iMonth)-1);
varmaxDay=getMaxDayOfMonth(iYear,iMonth);
varprevMonthMaxDay=getMaxDayOfMonth(iYear,parseInt(iMonth)-1);
vari=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="currentMonthcurrentDay";
}elseif(i%7<2){
tdNodes[i-1].className="currentMonthweek";
}else{
tdNodes[i-1].className="currentMonth";
}
}
varone=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);
};
};
</script>
</body>
</html>