js实现实时日历面板的个人创作(初级新人小作,请大师指教)

小生初来乍到,用jquery结合css、html为页面实现了一个实时日历面板的显示。此过程是我第一次独立完成一个js事件的产生,调试,美化,总的来说过程艰辛(当各种问题出现时一行一行找错emoj‘emoj),但是最终终于实现了,也是很开心的,,,哈哈哈。
首先我们学校开了C++课程,大一学期学了一点基础,更深的技术着实没有掌握,但一些基本的数据类型,语法知识也还是懂一点的。于是类似C语言,js语言学起来也不是那么费劲。
我设置了一个变量,monthMax,用来求本月的最大天数。由于是否为闰年,是否为2月,是否为1357810腊月,于是写了下面函数。

 function calendarArr(year,month){
        var leap;
        var monthMax;
        var monthsArr=['1','3','5','7','8','10','12'];
        if (year%4==0) {if(year%100==0) {if (year%400==0) {leap=true;}else{leap=false;};}else{leap=true;};}else{leap=false;};

         if (month==2) {
            if (leap){monthMax=29;}else{monthMax=28;}
         } else{
            for (var i = 0; i < monthsArr.length; i++) {
                  if(month==monthsArr[i]){monthMax=31;break;}else{monthMax=30;}
              };
         }
     return monthMax;
    };

不知道是否还能更优化些,但是光这些我就得绞尽脑汁,翻翻javascript微软手册,看看怎么实现数组的元素检查。。。。。
接下来获取计算机上显示的日期及本月天数(获取的月份默认从零开始,所以‘+1’f***)

    var time=new Date();
    var iDays=calendarArr(time.getFullYear(),time.getMonth()+1);//获取本月总天数

然后,我想先把本月的天数一一罗列在面板上,这时遇到了这样的问题,怎么才能很好的把本月的1号先排上去,剩下的直接++就行了。这个面板是按照
sun mon tue wed the fri sur
的顺序来排列日期,所以我产生这样的想法:
先获取本日是星期几,再根据这个数和本日日期来计算出本月1号是星期几。

var temp=7-[iDate+7-(iDay+1)]%7;//console.log(temp);//求出本月一号所对应的星期数。

上面的那个算法我也是笑了,不知道读者有没有在小学时做过这样的一个应用题:

已知一个月里今日是21号,而且今天是星期三,请计算出本月1号是星期几?

。。我就是这么看着题想出了上面的那个‘7-[iDate+7-(iDay+1)]%7’公式。
莫要嘲笑我呀。。。不知读者有什么更好的方法吗,求大神带。。
再之后就是代入到面板里了:

for (var i = 0; i<iDays; i++){
         oTd[i+temp].innerHTML=i+1;
        }; //按星期排列出本月日历 

之后就想办法罗列上月和下月的日期:

        var iDaysUp=calendarArr(time.getFullYear(),time.getMonth());
            var iDaysDown=calendarArr(time.getFullYear(),time.getMonth()+2);
            //获取这两月的天数
for (var i = temp-1; i>=0; i--) {
         oTd[i].innerHTML=iDaysUp;
         iDaysUp--;
         oTd.eq(i).addClass('normal');
        };//列出上个月在本日历中的星期排列;
         var iNow=1;
        for (var i = temp+iDays; i<=oTd.length-1; i++) {
         oTd[i].innerHTML=(iNow);
         iNow++;
         oTd.eq(i).addClass('normal');
         };//列出下个月。。。。。

最后呢,终于把这个功能实现了,真是不容易呢。。。

(function(){
    var oTd=[];
    var oDiv=$('#calender');
    var oTd=oDiv.find('td');
    var time=new Date();
    var iDays=calendarArr(time.getFullYear(),time.getMonth()+1);//获取本月总天数
        var iDaysUp=calendarArr(time.getFullYear(),time.getMonth());
            var iDaysDown=calendarArr(time.getFullYear(),time.getMonth()+2);
    var iDate=time.getDate();//console.log(iDate);    
    var iDay=time.getDay();//console.log(iDay)
    calender();
    function calender(){
        var temp=7-[iDate+7-(iDay+1)]%7;//console.log(temp);//求出本月一号所对应的星期数。
        for (var i = 0; i<iDays; i++){
         oTd[i+temp].innerHTML=i+1;
        }; //按星期排列出本月日历 
        for (var i = temp-1; i>=0; i--) {
         oTd[i].innerHTML=iDaysUp;
         iDaysUp--;
         oTd.eq(i).addClass('normal');
        };//列出上个月在本日历中的星期排列;
         var iNow=1;
        for (var i = temp+iDays; i<=oTd.length-1; i++) {
         oTd[i].innerHTML=(iNow);
         iNow++;
         oTd.eq(i).addClass('normal');
         };
    }
    function calendarArr(year,month){
        var leap;
        var monthMax;
        var monthsArr=['1','3','5','7','8','10','12'];
        if (year%4==0) {if(year%100==0) {if (year%400==0) {leap=true;}else{leap=false;};}else{leap=true;};}else{leap=false;};

         if (month==2) {
            if (leap){monthMax=29;}else{monthMax=28;}
         } else{
            for (var i = 0; i < monthsArr.length; i++) { if(month==monthsArr[i]){monthMax=31;break;}else{monthMax=30;} }; } return monthMax; }; })();

html部分:

<div id="calender">
                            <ul class="gradient">
                                <li>SUN</li>
                                <li>MON</li>
                                <li>TUE</li>
                                <li>WED</li>
                                <li>THU</li>
                                <li>FRI</li>
                                <li>SUR</li>
                            </ul>
                            <table>
                                <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 id="ddd">
                                 </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>
                            </table>
                        </div>

css:

#calender {border: 1px solid #8291B0 ;overflow: hidden;}
#calender ul{width: 318px;height:38px; overflow: hidden;}
#calender li{float:left;font-size: 14px;font-family: arial;}
#calender li,#calender td{width: 44px;text-align: center;line-height: 34px;height: 34px;font-weight: bold;color: #666;}
#calender td{background: #F1F1F1;border: 4px solid #FFF;}
#calender .active{}
#calender .normal{background-color: #F9F9F9;color: #999;}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值