js实现日历效果

前面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&&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].ο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)%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].ο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)%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>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值