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>


  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您好,我理解了您的要求。关于您的问题,您是想知道如何使用 JavaScript 制作一个可以进行一周日历切换的功能吗?如果是的话,可以参考以下的代码实现: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>日历切换示例</title> <style> .calendar { font-family: Arial, sans-serif; margin: 0 auto; width: 500px; text-align: center; } .header { display: flex; justify-content: space-between; margin: 20px 0; } .weekdays { display: flex; justify-content: space-around; margin: 20px 0; } .days { display: flex; flex-wrap: wrap; margin-bottom: 20px; } .day { width: 50px; height: 50px; line-height: 50px; border-radius: 50%; cursor: pointer; } .day:hover { background-color: #eee; } .today { background-color: #f00; color: #fff; } </style> </head> <body> <div class="calendar"> <div class="header"> <button id="prev">上一周</button> <h2 id="current"></h2> <button id="next">下一周</button> </div> <div class="weekdays"> <div>周日</div> <div>周一</div> <div>周二</div> <div>周三</div> <div>周四</div> <div>周五</div> <div>周六</div> </div> <div class="days"></div> </div> <script> var currentDate = new Date(); // 当前日期 var daysOfWeek = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']; // 一周的日期 var days = document.querySelector('.days'); // 显示日历日期的 DOM 元素 var current = document.querySelector('#current'); // 显示当前日期区间的 DOM 元素 var prevBtn = document.querySelector('#prev'); // 上一周按钮 var nextBtn = document.querySelector('#next'); // 下一周按钮 // 渲染日历日期 function renderDays(start) { days.innerHTML = ''; // 清空之前的日期 var date = new Date(start); for (var i = 0; i < 7; i++) { var day = document.createElement('div'); day.classList.add('day'); day.innerText = date.getDate(); if (date.toDateString() === new Date().toDateString()) { day.classList.add('today'); // 标记今天 } days.appendChild(day); date.setDate(date.getDate() + 1); // 日期自增 } } // 显示当前日期区间 function renderCurrent(start) { var date = new Date(start); var end = new Date(start); end.setDate(end.getDate() + 6); var str = date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日' + ' - ' + end.getFullYear() + '年' + (end.getMonth() + 1) + '月' + end.getDate() + '日'; current.innerText = str; } // 初始化日历 renderDays(currentDate); renderCurrent(currentDate); // 上一周按钮点击事件 prevBtn.addEventListener('click', function () { currentDate.setDate(currentDate.getDate() - 7); // 当前日期减一周 renderDays(currentDate); // 重新渲染日期 renderCurrent(currentDate); // 重新显示日期区间 }); // 下一周按钮点击事件 nextBtn.addEventListener('click', function () { currentDate.setDate(currentDate.getDate() + 7); // 当前日期加一周 renderDays(currentDate); // 重新渲染日期 renderCurrent(currentDate); // 重新显示日期区间 }); </script> </body> </html> ``` 以上代码实现的功能为,显示当前日期的一周日历,并且可以通过“上一周”和“下一周”按钮进行切换。其中,通过 JavaScript 实现了日期的渲染、显示当前日期区间以及按钮的点击事件。同时,也使用了一些简单的 CSS 样式来美化日历显示效果。希望能对您有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值