学步园

这几天闲来无聊，就自己做了一个Js版本的农历日历，由于Js的日期是从1970年1月1日开始计时的以偏移量来计算周期的，所以日历就暂时只支持1970年以后的日期。另外查询了一下农历日期的计算方法，发现没有数学模型和公式可循，只能以古历的不规则数组进行提取换算，所以就保存了1970到2050范围内的转换参数，日历支持的上限就就到2050年为止。

效果图如下：

源码如下：

 /*****************************************<br /> calendar data range from 1900 to 2050<br /> which also is the calendar's limit boundary.<br /> *****************************************/<br /> var lunarInfo=new Array(<br /> 0x0aea6,0x0ab50,0x04b60,0x0aae4,0x0a570,0x05260,0x0f263,0x0d950,0x05b57,0x056a0,<br /> 0x096d0,0x04dd5,0x04ad0,0x0a4d0,0x0d4d4,0x0d250,0x0d558,0x0b540,0x0b5a0,0x195a6,<br /> 0x095b0,0x049b0,0x0a974,0x0a4b0,0x0b27a,0x06a50,0x06d40,0x0af46,0x0ab60,0x09570,<br /> 0x04af5,0x04970,0x064b0,0x074a3,0x0ea50,0x06b58,0x055c0,0x0ab60,0x096d5,0x092e0,<br /> 0x0c960,0x0d954,0x0d4a0,0x0da50,0x07552,0x056a0,0x0abb7,0x025d0,0x092d0,0x0cab5,<br /> 0x0a950,0x0b4a0,0x0baa4,0x0ad50,0x055d9,0x04ba0,0x0a5b0,0x15176,0x052b0,0x0a930,<br /> 0x07954,0x06aa0,0x0ad50,0x05b52,0x04b60,0x0a6e6,0x0a4e0,0x0d260,0x0ea65,0x0d530,<br /> 0x05aa0,0x076a3,0x096d0,0x04bd7,0x04ad0,0x0a4d0,0x1d0b6,0x0d250,0x0d520,0x0dd45,<br /> 0x0b5a0,0x056d0,0x055b2,0x049b0,0x0a577,0x0a4b0,0x0aa50,0x1b255,0x06d20,0x0ada0);</p> <p>var monthName_ch = new Array('一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月');<br /> var day_of_month = new Array(31,28,31,30,31,30,31,31,30,31,30,31);<br /> var lunarDay = new Array('初一','初二','初三','初四','初五','初六','初七','初八','初九','初十','十一','十二','十三','十四','十五','十六','十七','十八','十九',<br /> '二十','二十一','二十二','二十三','二十四','二十五','二十六','二十七','二十八','二十九','三十');<br /> var festival = {'1-1':'元旦','2-14':'情人节','3-5':'雷锋纪念日','3-8':'妇女节','3-15':'消费者日','4-1':'愚人节','4-5':'清明节','5-1':'劳动节','6-1':'儿童节','8-1':'建军节','9-10':'教师节','10-1':'国庆节','12-25':'圣诞节'};<br /> var lFestival = {'1-1':'春节','1-15':'元宵节','5-5':'端午节','7-7':'七夕','8-15':'中秋节','9-9':'重阳节','12-8':'腊八','12-30':'除夕'}<br /> var currentYear;<br /> var currentMonth;<br /> var currentDayIndex;</p> <p>function getEl(element) {<br /> if (arguments.length > 1) {<br /> for (var i = 0, elements = [], length = arguments.length; i < length; i++)<br /> elements.push($(arguments[i]));<br /> return elements;<br /> }<br /> element = document.getElementById(element);<br /> return element;<br /> }</p> <p>function checkLeap(y){<br /> if(y%400==0)<br /> return true;<br /> else if(y%4==0&&y%100!=0)<br /> return true;<br /> return false;<br /> }</p> <p>/**<br /> * @param year<br /> * @return how many days in param year<br /> **/<br /> function lYearDays(y) {<br /> var i, sum=348;<br /> for(i=0x8000;i>0x8;i>>=1)<br /> sum+=(lunarInfo[y-1900]&i)?1:0;<br /> return (sum+leapDays(y));<br /> }</p> <p>/**<br /> * @param year<br /> * @return number of leap month days of param year<br /> **/<br /> function leapDays(y) {<br /> if(leapMonth(y))<br /> return ((lunarInfo[y-1900]&0x10000)?30:29);<br /> else return 0;<br /> }</p> <p>/**<br /> * @param year<br /> * @return leap month of param year, return 0 if none<br /> **/<br /> function leapMonth(y) {<br /> return (lunarInfo[y-1900]&0xf);<br /> }</p> <p>/**<br /> * @param month<br /> * @return number of days in param year/month<br /> **/<br /> function monthDays(y,m) {<br /> return ((lunarInfo[y-1900]&(0x10000>>m))?30:29 );<br /> }</p> <p>/**<br /> * constructor of Lunar object<br /> * @param current date<br /> * @return Lunar with lYear/lMonth/lDay<br /> **/<br /> function Lunar(objDate) {<br /> var i, leap=0, temp=0;<br /> var baseDate = new Date(1900,0,31);<br /> var offset = (objDate - baseDate)/86400000;</p> <p> this.nMonth = objDate.getMonth()+1;<br /> this.nDay = objDate.getDate();</p> <p> for(i=1900; i<2050 && offset>0; i++) {<br /> temp = lYearDays(i);<br /> offset -= temp;<br /> }</p> <p> if(offset<0) {<br /> offset += temp;<br /> i--;<br /> }</p> <p> this.year = i;<br /> leap = leapMonth(i); //which month leap<br /> this.isLeap = false;<br /> for(i=1; i<13 && offset>0; i++) {<br /> //if leap month<br /> if(leap>0 && i==(leap+1) && this.isLeap==false){<br /> --i;<br /> this.isLeap = true;<br /> temp = leapDays(this.year);<br /> }else<br /> temp = monthDays(this.year, i); </p> <p> //cancel leap<br /> if(this.isLeap==true && i==(leap+1))<br /> this.isLeap = false;<br /> offset -= temp;<br /> }//end of for</p> <p> if(offset==0 && leap>0 && i==leap+1)<br /> if(this.isLeap)<br /> this.isLeap = false;<br /> else{<br /> this.isLeap = true;<br /> --i;<br /> }</p> <p> if(offset<0){<br /> offset += temp;<br /> --i;<br /> }</p> <p> this.month = i;<br /> this.day = offset + 1;<br /> }</p> <p>/*******************<br /> * GUI js core<br /> *******************/<br /> function initCal(){<br /> initStyle();<br /> var t = new Date();<br /> currentYear = t.getYear();<br /> currentMonth = t.getMonth();<br /> currentDayIndex = 'cal_tbody_'+(t.getDate()+t.getDay()-1);<br /> showCal();<br /> }</p> <p>function showCal(){<br /> var tDate = new Date ();<br /> if(currentYear ==tDate.getYear()&¤tMonth==tDate.getMonth())<br /> getEl(currentDayIndex).style.color='orange';<br /> else<br /> getEl(currentDayIndex).style.color='white';</p> <p> var today = new Date(currentYear,currentMonth,1);<br /> var month = today.getMonth();<br /> var year = today.getYear();<br /> var week = today.getDay();<br /> var day = today.getDate();</p> <p> var idIndex = week+1;<br /> var dayLength = day_of_month[month];<br /> var i;</p> <p> if(month==1&&checkLeap(year))<br /> dayLength++;</p> <p> for(i=1;i<idIndex;i++)<br /> getEl('cal_tbody_'+i).innerText = '';</p> <p> for(var i=0;i<dayLength;i++){<br /> getEl('cal_tbody_'+idIndex).innerText = i+1;<br /> idIndex++;<br /> }</p> <p> for(i=idIndex;i<43;i++)<br /> getEl('cal_tbody_'+i).innerText = '';<br /> getEl('cal_title').innerText = monthName_ch[month]+' '+currentYear+'年';<br /> }</p> <p>function initStyle(){<br /> getEl('cal_pre').onmouseover = function(){getEl('cal_pre').src='images/cal_pre_over.png'};<br /> getEl('cal_pre').onmouseout = function(){getEl('cal_pre').src='images/cal_pre.png'};</p> <p> getEl('cal_next').onmouseover = function(){getEl('cal_next').src='images/cal_next_over.png'};<br /> getEl('cal_next').onmouseout = function(){getEl('cal_next').src='images/cal_next.png'};</p> <p> getEl('cal_ok_btn').onmouseover = function(){getEl('cal_ok_btn').style.color='blue'};<br /> getEl('cal_ok_btn').onmouseout = function(){getEl('cal_ok_btn').style.color='rgb(75,75,75)'};</p> <p> getEl('cal_reset_btn').onmouseover = function(){getEl('cal_reset_btn').style.color='blue'};<br /> getEl('cal_reset_btn').onmouseout = function(){getEl('cal_reset_btn').style.color='rgb(75,75,75)'};</p> <p> getEl('cal_exit_btn').onmouseover = function(){getEl('cal_exit_btn').style.color='blue'};<br /> getEl('cal_exit_btn').onmouseout = function(){getEl('cal_exit_btn').style.color='rgb(75,75,75)'};</p> <p> var tds = getEl('cal_tbody').getElementsByTagName('td');<br /> var tdsId;<br /> for(var i=0;i<tds.length;i++){<br /> tds[i].onmouseover = tdStyleMV;<br /> tds[i].onmouseout = tdStyleMO;<br /> }<br /> }</p> <p>function tdStyleMV(){<br /> var obj = window.event.srcElement;<br /> obj.style.background='url("images/cal_unit_over.png")';<br /> var day = obj.innerText;</p> <p> if(day.length==0){<br /> obj.title='';<br /> return;<br /> }</p> <p> var lDate = new Lunar(new Date(currentYear,currentMonth,day));<br /> obj.title= formatLunar(lDate);<br /> }</p> <p>function formatLunar(obj){<br /> if(festival[obj.nMonth+'-'+obj.nDay])<br /> var fest = festival[obj.nMonth+'-'+obj.nDay];</p> <p> if(lFestival[obj.month+'-'+obj.day])<br /> var lFest = lFestival[obj.month+'-'+obj.day];</p> <p> var str = '';<br /> if(obj.isLeap)<br /> str = '农历润'+monthName_ch[obj.month-1]+lunarDay[obj.day-1]+' ';<br /> else<br /> str = '农历'+monthName_ch[obj.month-1]+lunarDay[obj.day-1]+' ';</p> <p> if(fest)<br /> str = str+ fest;<br /> if(lFest&&!obj.isLeap)<br /> str = str+ ' '+lFest;<br /> return str;<br /> }</p> <p>function tdStyleMO(){<br /> var obj = window.event.srcElement;<br /> obj.style.background='url("images/cal_unit.png")';<br /> }</p> <p>function toggleMonth(mark){<br /> if(mark==0){<br /> currentMonth--;<br /> if(currentMonth==-1){<br /> if(currentYear==1970){<br /> alert("该日历不支持1970年之前的日期");<br /> currentMonth++;<br /> return;<br /> }<br /> currentYear--;<br /> currentMonth=12;<br /> }<br /> }else{<br /> currentMonth++;<br /> if(currentMonth==12){<br /> if(currentYear==2050){<br /> alert("该日历不支持2050年之后的日期");<br /> currentMonth++;<br /> return;<br /> }<br /> currentYear++;<br /> currentMonth = 0;<br /> }<br /> }</p> <p> showCal();<br /> }</p> <p>function resetCal(){<br /> getEl('cal_year').value='';<br /> getEl('cal_month').value='';<br /> var d = new Date();</p> <p> var t = new Date();<br /> currentYear = t.getYear();<br /> currentMonth = t.getMonth();<br /> showCal(currentYear,currentMonth);<br /> }</p> <p>function queryCal(){<br /> var year = getEl('cal_year').value;<br /> var month = getEl('cal_month').value;</p> <p> if(year.length==0)<br /> alert("输入年份非空");<br /> if(isNaN(year))<br /> alert("年份输入格式错误！");<br /> else if(isNaN(month))<br /> alert("月份输入格式错误！");<br /> else if(year<1970||year>2050)<br /> alert("输入年份超出界限");<br /> else if(month.length==0){<br /> currentYear = year;<br /> currentMonth = 1;<br /> showCal(currentYear,currentMonth);<br /> }else if(month>12||month<1)<br /> alert("输入月份超出界限");<br /> else{<br /> currentYear = year;<br /> currentMonth = month-1;<br /> showCal(currentYear,currentMonth);<br /> }<br /> }

具体的图片资源和源码文件我已经上传到我的资源了，有兴趣的朋友可以去下载来看看，反复调试过Css的效果之后，发现在火狐浏览器和IE下Div边距的2px问题很令人恼火，而且Dom事件模型也很大区别，所以在火狐里就无法使用了，希望以后有空可以再做一个更通用一点的。