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>