前面html、css部分就不上传了，主体部分就是span里放头部的年和月，table里放每个月的时间，下面是js部分的代码
<script type="text/javascript"> window.οnlοad=function(){ var oBtu=document.getElementsByTagName('button')[0]; var oBox=document.getElementById('box'); var aSpan=document.getElementsByTagName('span'); var aBtu=oBox.getElementsByTagName('button'); var aTr=oBox.getElementsByTagName('tr'); var aTd=oBox.getElementsByTagName('td'); var arr=[31,28,31,30,31,30,31,31,30,31,30,31]; var toOld=0; var toNext=0; var oMouth=0; var oYear=0; var bTu=true; oBtu.οnclick=function(){ if (bTu) { oBox.style.opacity=1; bTu=false; }else{ oBox.style.opacity=0; bTu=true; } } // 获取到年月日 var nowDate=new Date(); var year=nowDate.getFullYear(); var mouth=nowDate.getMonth()+1; var nMouth=mouth; var dateDate=nowDate.getDate(); var weekDate=nowDate.getDay(); var num=Math.ceil(dateDate/7); var num1=dateDate%7; // 判断今天应该在那个td里显示 if(dateDate%7>weekDate){ var date=(num)*7+(weekDate); }else{ var date=(num-1)*7+(weekDate); } aSpan[0].innerHTML=year; aSpan[1].innerHTML=mouth; if ((year%4==0&&year0!=0)||year@0==0) { arr[1]=29; alert(1); } if (num1!=0) { num1=num1; }else{ num1=7; } if (weekDate!=0) { if (weekDate<num1) { num=num+1; } } // 将今天设置不同的样式 aTd[date].innerHTML=dateDate; aTd[date].className='active'; var nowTd=aTd[date].innerHTML; for(var i=0;i<aTd.length;i++){ var j=i-date; var num=parseInt(nowTd)+parseInt(j); if (num<=0||num>arr[mouth-1]) { aTd[i].innerHTML=""; }else{ aTd[i].innerHTML=num; if (num==1) { toOld=i; } if (num==arr[mouth-1]) { toNext=i; } } } // 通过上个月的第一天的位置确定这个月最后一天的位置 aBtu[0].οnclick=function(){ oMouth++; for(var n=0;n<aTd.length;n++){ aTd[n].innerHTML=""; } if (mouth-oMouth!=0) { oYear=oYear; }else{ oYear=oYear+1; mouth=12; oMouth=0; } if (!(oYear==0&&(mouth-oMouth)==nMouth)) { aTd[date].className=''; }else{ aTd[date].className='active'; } // 检测是否为闰年 if (((year-oYear)%4==0&&(year-oYear)0!=0)||(year-oYear)@0==0){ arr[1]=29; }else{ arr[1]=28; } var aMouth=mouth-oMouth; aSpan[0].innerHTML=year-oYear; aSpan[1].innerHTML=aMouth; if (toOld==0) { toOld=7; } if (arr[aMouth-1]+(7-toOld)>35) { num=34+toOld; }else{ num=27+toOld; } aTd[num].innerHTML=arr[aMouth-1]; for(var i=num;i>=0;i--){ aTd[num-i].innerHTML=arr[aMouth-1]-i; } for(var m=0;m<aTd.length;m++){ if (aTd[0]!="") { if (aTd[0]>=0) { num=num+7; alert(num); aTd[num].innerHTML=arr[aMouth-1]; for(var i=num;i>=0;i--){ aTd[num-i].innerHTML=arr[aMouth-1]-i; } } } if(aTd[m].innerHTML<=0){ aTd[m].innerHTML=""; } if(aTd[m].innerHTML==1){ toOld=m; }else if(aTd[m].innerHTML==arr[aMouth-1]){ toNext=m; } } } // 同aBtu[0]一样 aBtu[1].οnclick=function(){ oMouth--; for(var n=0;n<aTd.length;n++){ aTd[n].innerHTML=""; } if (mouth-oMouth!=13) { oYear=oYear; }else{ oYear=oYear-1; mouth=1; oMouth=0; } if (!(oYear==0&&(mouth-oMouth)==nMouth)) { aTd[date].className=''; }else{ aTd[date].className='active'; } if (((year-oYear)%4==0&&(year-oYear)0!=0)||(year-oYear)@0==0){ arr[1]=29; }else{ arr[1]=28; } var aMouth=mouth-oMouth; aSpan[0].innerHTML=year-oYear; aSpan[1].innerHTML=aMouth; var num=(toNext%7)+1; if (num==7) { num=0; } aTd[num].innerHTML=1; for(var i=num;i<=arr[mouth-1-oMouth]+num-1;i++){ aTd[i].innerHTML=i-num+1; } for(var m=0;m<aTd.length;m++){ if(aTd[m].innerHTML==1){ toOld=m; }else if(aTd[m].innerHTML==arr[aMouth-1]){ toNext=m; } } } } </script>