js实现实时日历面板的个人创作（初级新人小作，请大师指教）

[hellokubby]

小生初来乍到，用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;}

[天际的海浪]

写的不错，你这个算法可以适用于任何编程语言。 不过在javascript中 本月的最大天数 和 本月1号是星期几 可以直接通过Date对象得出，不用计算。 new Date()对象不只能获取当前日期，还可以获取指定的日期。并且当指定的年、月、日超出范围时会自动调整为正确的日期. 如指定日期为2月0日new Date(2016, 2-1, 0)会自动调整为1月31日 var time=new Date(); var iDays=new Date(time.getFullYear(),time.getMonth()+1,0).getDate();//获取本月总天数 var temp=new Date(time.getFullYear(),time.getMonth(),1).getDay();//求出本月一号所对应的星期数。