js实现日历效果

来源：互联网发布：比特币挖矿程序 mac 编辑：程序博客网时间：2024/05/17 04:49
前面html、css部分就不上传了，主体部分就是span里放头部的年和月，table里放每个月的时间，下面是js部分的代码
    <script type="text/javascript">        window.onload=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.onclick=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&&year%100!=0)||year%400==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].onclick=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)%100!=0)||(year-oYear)%400==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].onclick=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)%100!=0)||(year-oYear)%400==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>
1 0