万年历(含农历)

时间:2022-10-29 09:43:14

背景:花了几天时间开发了一个含农历的万年历,虽然还存在一些问题但基本功能都已实现。可能代码并不是很简洁,清晰。仅作为参考。


一、HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" href="calen.css" />
</head>

<body>
<div class="calendar">
    <div class="cale_head">
        <div class="control year_control">
            <a href="#" class="icon prev"></a>
            <div class="year">
                <i class="trigger"></i>
                <div class="cale_year cale_field"></div>
            </div>
            <a href="#" class="icon next"></a>
            <ul class="year_list"></ul>
        </div>
        <div class="control month_control">
            <a href="#" class="icon prev"></a>
            <div class="month">
                <i class="trigger"></i>
                <div class="cale_month cale_field"></div>
            </div>
            <a href="#" class="icon next"></a>
            <ul class="month_list"></ul>
        </div>
        <div class="control holiday_control">
            <div class="holiday">
                <i class="trigger"></i>
                <div class="cale_holiday cale_field">2016年假日安排</div>
            </div>
            <ul class="holiday_list"><li class="hlist">2016年假日安排</li><li>元旦</li><li>春节</li><li>清明节</li><li>劳动节</li><li>端午节</li><li>中秋节</li><li>国庆节</li></ul>
        </div>
        <div class="control btn_today">返回今天</div>
        <div class="time_panel">
                北京时间:&nbsp;<span class="time"></span>
        </div>
    </div>
    <div class="cale_main">
        <div class="cale_left">
            <ul class="weeks">
                <li class="days">日</li>
                <li class="days">一</li>
                <li class="days">二</li>
                <li class="days">三</li>
                <li class="days">四</li>
                <li class="days">五</li>
                <li class="days">六</li>
            </ul>
            <ul class="date">
                
            </ul>
        </div>
        <div class="cale_right">
            <div class="date_bar">
                <span class="cur_date"></span>
                <span class="cur_weekday"></span>
            </div>
            <div class="cur_day"></div>
            <div class="lunar_bar">
                <div class="lunar_date"></div>
                <div class="lunar_animal"></div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="calen.js"></script>
</body>
</html>

二、css

*{
    margin:0;
    padding:0;
    }
body{
    font-family:arial;
    font-size:12px;
    }
ul,li{
    list-style:none;
    }
.calendar{
    width:580px;
    margin:0 auto;
    border:1px solid #dddddd;
    }
.cale_head{
    width:100%;
    height:42px;
    border-bottom:1px solid #dddddd;
    line-height:40px;
    background:#eeeeee;
    box-sizing:border-box;
    }
.control{
    float:left;
    border:1px solid #dddddd;
    height:20px;
    line-height:20px;
    margin:10px 5px;
    background-color:#FFFFFF;
    zoom:1;
    position:relative;
    cursor:pointer;
    }
.icon{
    width:14px;
    height:20px;
    float:left;
    }
.trigger{
    float:right;
    width:14px;
    height:12px;
    background:url(image/icon.gif) no-repeat left -55px;
    }
.cale_field{
    float:left;
    margin:0 5px;
    }
.year_control .prev{
    background:url(image/icon.gif) no-repeat left top;
    }
.year_control .year{
    float: left;
    height: 12px;
    line-height: 12px;
    padding: 4px 5px;
    padding-bottom: 0;
    border-left: 1px solid #c9cccf;
    border-right: 1px solid #c9cccf;
    white-space:nowrap;
    }
.year_control .next{
    background:url(image/icon.gif) no-repeat left -25px;
    }
.year_list{
    display:none;
    width:74px;
    height:160px;
    position:absolute;
    left:14px;
    top:20px;
    background:#FFFFFF;
    border-bottom:1px solid #dddddd;
    border-left:1px solid #dddddd;
    border-right:1px solid #dddddd;
    overflow:auto;
    }
.year_list li{
    width:57px;
    text-align:center;
    color:#999999;
    }
.year_list li:hover{
    background:#0078B3;
    color:#FFFFFF;
    }
.month_control .prev{
    background:url(image/icon.gif) no-repeat left top;
    }
.month_control .month{
    float: left;
    height: 12px;
    line-height: 12px;
    padding: 4px 5px;
    padding-bottom: 0;
    border-left: 1px solid #c9cccf;
    border-right: 1px solid #c9cccf;
    white-space:nowrap;
    width:50px;
    }
.month_control .next{
    background:url(image/icon.gif) no-repeat left -25px;
    }
.month_list{
    display:none;
    width:53px;
    height:160px;
    position:absolute;
    left:14px;
    top:20px;
    background:#FFFFFF;
    border-bottom:1px solid #dddddd;
    border-left:1px solid #dddddd;
    border-right:1px solid #dddddd;
    overflow:auto;
    }
.month_list li{
    width:36px;
    text-align:center;
    color:#999999;
    }
.month_list li:hover{
    background:#0078B3;
    color:#FFFFFF;
    }
.holiday_control .holiday{
    float: left;
    height: 12px;
    line-height: 12px;
    padding: 4px 5px;
    padding-bottom: 0;
    white-space: nowrap;
    width:112px;
    text-align:center;
    }
.holiday_list{
    display:none;
    width:122px;
    height:160px;
    position:absolute;
    left:-1px;
    top:20px;
    background:#FFFFFF;
    border-bottom:1px solid #dddddd;
    border-left:1px solid #dddddd;
    border-right:1px solid #dddddd;
    overflow:auto;
    }
.holiday_list li{
    width:122px;
    text-align:center;
    color:#999999;
    }
.holiday_list .hlist{
    background:#0078B3;
    color:#FFFFFF;
    }
.holiday_list li:hover{
    background:#0078B3;
    color:#FFFFFF;
    }
.btn_today{
    height: 12px;
    line-height: 12px;
    padding: 4px 5px;
    }
.time_panel{
    float: right;
    width: 125px;
    height: 20px;
    color: #999;
    white-space: nowrap;
    margin-right:10px;
    }
.cale_main{
    overflow:hidden;
    }
.cale_left{
    width:420px;
    overflow:hidden;
    border:none;
    margin:0;
    float:left;
    }    
.cale_left .days{
    box-sizing:border-box;
    border-bottom:1px solid #CCCCCC;
    border-right:1px solid #CCCCCC;
    width:60px;
    height:40px;
    float:left;
    line-height:40px;
    text-align:center;
    background:#fefbeb;
    }
.cale_left .date li{
    width:60px;
    height:60px;
    float:left;
    box-sizing:border-box;
    border-bottom:1px solid #CCCCCC;
    border-right:1px solid #CCCCCC;
    cursor:pointer;
    }
.cale_left .date li h6{
    text-align:center;
    font-size:18px;
    line-height:30px;
    }
.cale_left .date li span{
    display:block;
    text-align:center;
    }
.cale_right{
    width:160px;
    height:200px;;
    float:left;
    border-bottom:1px solid #CCCCCC;
    }
.cale_right .date_bar{
    width:100%;
    height:50px;
    line-height:50px;
    text-align:center;
    font-size:12px;
    font-family:Arial;
    }
.cale_right .date_bar .cur_date{
    margin-right:5px;
    }
.cale_right .cur_day{
    width:100%;
    height:80px;
    line-height:80px;
    font-size:60px;
    color: #c00;
    text-align:center;
    }
.cale_right .lunar_bar{
    width:100%;
    height:60px;
    font-size:14px;
    text-align:center;
    color:#999999;
    }
.cale_right .lunar_bar .lunar_date{
    height:30px;
    line-height:30px;
    }
.cale_right .lunar_bar .lunar_animal{
    height:30px;
    line-height:30px;
    }

三、js

var oTime=document.getElementsByClassName('time')[0];
var oYearControl=document.getElementsByClassName('year_control')[0];
var oYear=document.getElementsByClassName('year')[0];
var oYearList=document.getElementsByClassName('year_list')[0];
var oMonthControl=document.getElementsByClassName('month_control')[0];
var oMonth=document.getElementsByClassName('month')[0];
var oMonthList=document.getElementsByClassName('month_list')[0];
var oHoliday=document.getElementsByClassName('holiday')[0];
var oHolidayList=document.getElementsByClassName('holiday_list')[0];
var oHolidayLi=oHolidayList.getElementsByTagName('li');
var oBtnToday=document.getElementsByClassName('btn_today')[0];
var oDate=document.getElementsByClassName('date')[0];
var oCurYear=document.getElementsByClassName('cale_year')[0];
var oCurMonth=document.getElementsByClassName('cale_month')[0];
var oCurHoliday=document.getElementsByClassName('cale_holiday')[0];
var oCurDate=document.getElementsByClassName('cur_date')[0];
var oCurWeekday=document.getElementsByClassName('cur_weekday')[0];
var oCurDay=document.getElementsByClassName('cur_day')[0];
var oLunarDate=document.getElementsByClassName('lunar_date')[0];
var oLunarAnimal=document.getElementsByClassName('lunar_animal')[0];
var gregoDay=[31,28,31,30,31,30,31,31,30,31,30,31];

var lunarInfo=[
0x04bd8,0x04ae0,0x0a570,0x054d5,0x0d260,0x0d950,0x16554,0x056a0,0x09ad0,0x055d2,
0x04ae0,0x0a5b6,0x0a4d0,0x0d250,0x1d255,0x0b540,0x0d6a0,0x0ada2,0x095b0,0x14977,
0x04970,0x0a4b0,0x0b4b5,0x06a50,0x06d40,0x1ab54,0x02b60,0x09570,0x052f2,0x04970,
0x06566,0x0d4a0,0x0ea50,0x06e95,0x05ad0,0x02b60,0x186e3,0x092e0,0x1c8d7,0x0c950,
0x0d4a0,0x1d8a6,0x0b550,0x056a0,0x1a5b4,0x025d0,0x092d0,0x0d2b2,0x0a950,0x0b557,
0x06ca0,0x0b550,0x15355,0x04da0,0x0a5d0,0x14573,0x052d0,0x0a9a8,0x0e950,0x06aa0,
0x0aea6,0x0ab50,0x04b60,0x0aae4,0x0a570,0x05260,0x0f263,0x0d950,0x05b57,0x056a0,
0x096d0,0x04dd5,0x04ad0,0x0a4d0,0x0d4d4,0x0d250,0x0d558,0x0b540,0x0b5a0,0x195a6,
0x095b0,0x049b0,0x0a974,0x0a4b0,0x0b27a,0x06a50,0x06d40,0x0af46,0x0ab60,0x09570,
0x04af5,0x04970,0x064b0,0x074a3,0x0ea50,0x06b58,0x055c0,0x0ab60,0x096d5,0x092e0,
0x0c960,0x0d954,0x0d4a0,0x0da50,0x07552,0x056a0,0x0abb7,0x025d0,0x092d0,0x0cab5,
0x0a950,0x0b4a0,0x0baa4,0x0ad50,0x055d9,0x04ba0,0x0a5b0,0x15176,0x052b0,0x0a930,
0x07954,0x06aa0,0x0ad50,0x05b52,0x04b60,0x0a6e6,0x0a4e0,0x0d260,0x0ea65,0x0d530,
0x05aa0,0x076a3,0x096d0,0x04bd7,0x04ad0,0x0a4d0,0x1d0b6,0x0d250,0x0d520,0x0dd45,
0x0b5a0,0x056d0,0x055b2,0x049b0,0x0a577,0x0a4b0,0x0aa50,0x1b255,0x06d20,0x0ada0,
0x14b63,0x09370,0x049f8,0x04970,0x064b0,0x168a6,0x0ea50,0x06b20,0x1a6c4,0x0aae0,
0x0a2e0,0x0d2e3,0x0c960,0x0d557,0x0d4a0,0x0da50,0x05d55,0x056a0,0x0a6d0,0x055d4,
0x052d0,0x0a9b8,0x0a950,0x0b4a0,0x0b6a6,0x0ad50,0x055a0,0x0aba4,0x0a5b0,0x052b0,
0x0b273,0x06930,0x07337,0x06aa0,0x0ad50,0x14b55,0x04b60,0x0a570,0x054e4,0x0d160,
0x0e968,0x0d520,0x0daa0,0x16aa6,0x056d0,0x04ae0,0x0a9d4,0x0a2d0,0x0d150,0x0f252,
0x0d520];

var gregoDay=[31,28,31,30,31,30,31,31,30,31,30,31];
var Animals=["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"];
var solarTerm =["小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"];
var sTermInfo=[0,21208,42467,63836,85337,107014,128867,150921,173149,195551,218072,240693,263343,285989,308563,331033,353350,375494,397447,419210,440795,462224,483532,504758];
var nStr1=['日','一','二','三','四','五','六','七','八','九','十'];
var nStr2=['初','十','廿','卅',' '];
//国历节日
var sFtv =["0101 元旦","0214 情人节","0308 妇女节","0312 植树节","0315 消费者权益日","0401 愚人节","0501 劳动节","0504 青年节","0512 护士节","0601 儿童节","0701 建党节","0801 建军节","0910 教师节","0928 孔子诞辰","1001 国庆节","1006 老人节","1024 联合国日","1224 平安夜","1225 圣诞节"];
//农历节日
var lFtv = ["0101 春节","0115 元宵节","0505 端午节","0707 七夕情人节","0715 中元节","0815 中秋节","0909 重阳节","1208 腊八节","1224 小年","0100 除夕"];

//一位数变成两位数
function twoNum(num){
    if(num<10)
        return "0"+num;
    return num;
}
//获得当前时间
function getCurTime(){
    var date=new Date();
    var hour=date.getHours();
    var minute=date.getMinutes();
    var second=date.getSeconds();    
    return twoNum(hour)+":"+twoNum(minute)+":"+twoNum(second);
}

oTime.innerHTML=getCurTime();
setInterval(function(){oTime.innerHTML=getCurTime();},1000);
//列表点击显现,消失
function listEvent(object){
    if(object.style.display == 'none'){
        object.style.display='block';
    }
    else{
        object.style.display='none';
    }
}
listEvent(oYearList);
listEvent(oMonthList);
listEvent(oHolidayList);
//年份,月份,节日点击事件
oYear.onclick=function(ev){
    listEvent(oYearList);
    oMonthList.style.display='none';
    oHolidayList.style.display='none';
    var y=parseInt(oCurYear.innerHTML);
    oYearList.scrollTop=(y-1900-2)*20;
    ev.stopPropagation();
}
oMonth.onclick=function(ev){
    listEvent(oMonthList);    
    oYearList.style.display='none';
    oHolidayList.style.display='none';    
    var m=parseInt(oCurMonth.innerHTML);
    oMonthList.scrollTop=(m-1-2)*20;
    ev.stopPropagation();
}    
oHoliday.onclick=function(ev){
    listEvent(oHolidayList);
    oYearList.style.display='none';
    oMonthList.style.display='none';
    for(var i=0; i<oHolidayLi.length; i++){
        oHolidayLi[i].className='';
        if(oHolidayLi[i].innerHTML == oCurHoliday.innerHTML){
            oHolidayLi[i].className='hlist';
        }    
    }
    ev.stopPropagation();
}
//返回今天
oBtnToday.onclick=function(){
    oYearList.style.display='none';
    oMonthList.style.display='none';
    oHolidayList.style.display='none';
}
oBtnToday.onclick=function(){
    var date=new Date();
    var year=date.getFullYear();
    var month=date.getMonth();
    oCurYear.innerHTML=year+'年';
    oCurMonth.innerHTML=month+1+'月';
    oDate.innerHTML='';
    outGregoDay(year,month+1);
}
//创建年份列表
function createYearList(n){
    var date=new Date();
    var year=date.getFullYear();
    var month=date.getMonth();
    oCurYear.innerHTML=year+'年';
    oCurMonth.innerHTML=month+1+'月';
    for(var i=1900; i<=2100; i++){
        var oLi=document.createElement('li');
        oLi.innerHTML=i+'年';
        if(oLi.innerHTML == oCurYear.innerHTML){
            oLi.style.background='#0078B3';
            oLi.style.color='#ffffff';
        }
        oYearList.appendChild(oLi);
    }
    oLi=oYearList.getElementsByTagName('li');
    for(var i=0; i<oLi.length; i++){
        oLi[i].onclick=function(){
            oDate.innerHTML='';
            oCurYear.innerHTML=this.innerHTML;    
            var y=parseInt(oCurYear.innerHTML);
            var m=parseInt(oCurMonth.innerHTML);
            outGregoDay(y,m);
            for(var j=0; j<oLi.length; j++){
                oLi[j].style.color='#999999';
                oLi[j].style.background='';
            }
            this.style.background='#0078B3';
            this.style.color='#FFFFFF';
        }    
    }
    var oPre=oYearControl.getElementsByClassName('prev')[0];
    var oNext=oYearControl.getElementsByClassName('next')[0];
    oPre.onclick=function(){
        oDate.innerHTML='';
        var y = oCurYear.innerHTML;
        y=parseInt(y)-1;
        if(y<1900)
            y=1900;
        oCurYear.innerHTML=y+"年";
        var m=parseInt(oCurMonth.innerHTML);
        outGregoDay(y,m);
    }
    oNext.onclick=function(){
        oDate.innerHTML='';
        var y = oCurYear.innerHTML;
        y=parseInt(y)+1;
        if(y>2100)
            y=2100;
        oCurYear.innerHTML=y+"年";
        var m=parseInt(oCurMonth.innerHTML);
        outGregoDay(y,m);
    }
}
createYearList(100);
//创建月份列表

document.addEventListener('click',function(){
    oYearList.style.display='none';
    oMonthList.style.display='none';
    oHolidayList.style.display='none';                                       
},false);
function createMonthList(){
    for(var i=1; i<=12; i++){
        var oLi=document.createElement('li');
        oLi.innerHTML=i+'月';
        if(oLi.innerHTML == oCurMonth.innerHTML){
            oLi.style.background='#0078B3';
            oLi.style.color='#ffffff';
        }
        oMonthList.appendChild(oLi);
    }    
    oLi=oMonthList.getElementsByTagName('li');
    for(var i=0; i<oLi.length; i++){
        oLi[i].onclick=function(){
            oDate.innerHTML='';
            oCurMonth.innerHTML=this.innerHTML;    
            var y=parseInt(oCurYear.innerHTML);
            var m=parseInt(oCurMonth.innerHTML);
            outGregoDay(y,m);
            for(var j=0; j<oLi.length; j++){
                oLi[j].style.color='#999999';
                oLi[j].style.background='';
            }
            this.style.background='#0078B3';
            this.style.color='#FFFFFF';
        }    
    }
    var oPre=oMonthControl.getElementsByClassName('prev')[0];
    var oNext=oMonthControl.getElementsByClassName('next')[0];
    oPre.onclick=function(){
        oDate.innerHTML='';
        var m = oCurMonth.innerHTML;
        var y=parseInt(oCurYear.innerHTML);
        m=parseInt(m)-1;
        if(m<1){
            m=12;
            y--;
            oCurYear.innerHTML=y+'年';
        }
        oCurMonth.innerHTML=m+"月";
        outGregoDay(y,m);
    }
    oNext.onclick=function(){
        oDate.innerHTML='';
        var m = oCurMonth.innerHTML;
        var y=parseInt(oCurYear.innerHTML);
        m=parseInt(m)+1;
        if(m>12){
            m=1;
            y++;
            oCurYear.innerHTML=y+'年';
        }
        oCurMonth.innerHTML=m+"月";
        outGregoDay(y,m);
    }
}
createMonthList();
//节日列表
function createHolidayList(){
    for(var i=0; i<oHolidayLi.length; i++){
        oHolidayLi[i].onclick=function(){
            oCurHoliday.innerHTML=this.innerHTML;    
        }    
    }    
}
createHolidayList();
//获取公历某年某月的天数
function getGregoDay(y,m){
    if(m==1){
        if((y%4==0) && (y%100!=0) || (y%400 == 0))    
            return 29;
        else
            return 28;
    }
    else
        return(gregoDay[m]);
}
//获取某年某月的第一天是星期几
function getOneDay(y,m){
     var day = new Date(y,m,1);  
     var days=day.getDay()
     return days;    
}
//输出公历农历日期
function outGregoDay(y,m){
    var days=getOneDay(y,m-1);
    var n=days;
    var dayNum=getGregoDay(y,m-1);
    var preDays=getGregoDay(y,m-2)
    var tmp1=sTerm(y,2*m-2);
    var tmp2=sTerm(y,2*m-1);
    while(n>0){
        var aLi=document.createElement('li');
        aLi.innerHTML='';
        aLi.style.background='#EEEEEE';
        oDate.appendChild(aLi);
        n--;
    }
    for(var i=1; i<=dayNum; i++){
        var lunarDay = lunarDate(y,m,i);
        var aLi=document.createElement('li');
        var x=i+days;
        
           if(i==tmp1)
            aLi.innerHTML="<h6>"+i+"</h6><span style='color:#8eb475'>"+solarTerm[(m-1)*2]+"</span>";
        else if(i==tmp2)
            aLi.innerHTML="<h6>"+i+"</h6><span style='color:#8eb475'>"+solarTerm[(m-1)*2+1]+"</span>";
        else{
            aLi.innerHTML="<h6>"+i+"</h6><span>"+toLunarDay(lunarDay.year,lunarDay.month,lunarDay.day)+"</span>";
        }
        for (var j=0;j<sFtv.length;j++){    //公历节日
            if (parseInt(sFtv[j].substr(0,2))==(m)){
                if (parseInt(sFtv[j].substr(2,4))==(i)){
                    aLi.innerHTML="<h6>"+i+"</h6><span style='color:#86a9c0'>"+sFtv[j].substr(5)+"</span>";
                }
            }
        }
        for (var k=0;k<lFtv.length;k++){    //农历节日
            if (parseInt(lFtv[k].substr(0,2))==(lunarDay.month)){
                if (parseInt(lFtv[k].substr(2,4))==(lunarDay.day)){
                    aLi.innerHTML="<h6>"+i+"</h6><span style='color:#b04343'>"+lFtv[k].substr(5)+"</span>";
                }
            }
            if (12==(lunarDay.month)){    //判断是否为除夕
                var eve = leapMonth(lunarDay.year)? leapDay(lunarDay.year): monthDay(lunarDay.year,lunarDay.month);
                if (eve==(lunarDay.day)){
                    aLi.innerHTML="<h6>"+i+"</h6><span style='color:#b04343'>除夕</span>";
                }
            }
        }
        //alert(aLi.getElementsByTagName('h6'))
        if(x%7 ==0 || x%7==1)
            aLi.getElementsByTagName('h6')[0].style.color='#b04343';
        oDate.appendChild(aLi);
    }
    var restNum=42-days-dayNum;
    while(restNum>0){
        var aLi=document.createElement('li');
        aLi.innerHTML='';
        aLi.style.background='#eeeeee';
        oDate.appendChild(aLi);
        restNum--;
    }
    today(y,m);
}
outGregoDay(2016,4);

//得到今天的日期
function today(y,m){
    var date=new Date();
    var year=date.getFullYear();
    var month=date.getMonth()+1;
    var day=date.getDate();
    var days=getOneDay(y,m-1);
    var num=getGregoDay(y,m-1);
    var curYear=parseInt(oCurYear.innerHTML);
    var curMonth=parseInt(oCurMonth.innerHTML);
    var aLi=oDate.getElementsByTagName('li');
    for(var i=days; i<num+days; i++){        
        aLi[i].onclick=function(){
            for(var j=days; j<num+days; j++){
                aLi[j].style.backgroundColor='#FFFFFF';
            }
            var curDay=this.getElementsByTagName('h6')[0].innerHTML;
            addDate(curYear,curMonth,curDay);
            this.style.backgroundColor='#FBFCD6';    
        }    
    }
    if(curYear==year){
        if(curMonth==month){
            for(var i=days; i<num+days; i++){
                if(i==day){
                    aLi[i-1+days].style.background='url(image/biaoji.gif) no-repeat top center';    
                }    
            }
        }    
    }
}
//农历某年某月的天数
function monthDay(y,m){
    return( (lunarInfo[y-1900] & (0x10000>>m))? 30: 29 );
}
//农历y年哪一个月是闰月
function leapMonth(y){
    return(lunarInfo[y-1900]&0xf);
}
//农历获得闰月的天数
function leapDay(y){
    if(leapMonth(y))  
        return((lunarInfo[y-1900] & 0x10000)? 30: 29);
    else
        return 0;    
}
//获得农历y年的天数
function yearDay(y){
    var sum=0;
    for(var i=1; i<=12; i++){
        sum+=monthDay(y,i);
    }
    if(leapMonth(y))
        sum+=leapDay(y);
    return sum;
}
//根据公历得到农历
function lunarDate(y,m,d){
    if(y<1900 || y>2100){
        return;
    }
    var temp=0;
    var objDate = new Date(y,m-1,d);
    var baseDate = new Date(1900,0,31);
    var offset = (objDate - baseDate)/86400000;
    for(var i=1900; i<2100 && offset>0; i++){
        temp=yearDay(i);
        offset-=temp;
    }
    if(offset<0){
        offset += temp;
        i--;
    }
    var year=i;
    var leap=leapMonth(i);
    var isLeap = false;
    for(i=1; i<13 && offset>0; i++) {
        if(leap>0 && i==(leap+1) && isLeap==false){
            --i;
            isLeap = true;
            temp = leapDay(year);
        }
        else{
            temp = monthDay(year,i);
        }
        if(isLeap==true && i==(leap+1))
            isLeap = false;
        offset -= temp;
    }
    if(offset==0 && leap>0 && i==leap+1){
        if(this.isLeap){
            isLeap = false;
        }
        else{
            isLeap = true;
            --i;
        }
    }
    if(offset<0){
        offset += temp;
        --i;
    }
    month = i
    day = offset + 1
    return {'year':year,'month':month,'day':day};
}
//农历月
function toLunarMonth(month){
    var arr=['一','二','三','四','五','六','七','八','九','十','十一','十二'];
    return arr[month-1];
}
//将数字变成中文日期
function toLunarDay(year,month, day){
    if(day==1)
        return toLunarMonth(month)+"月";
    else if(day<=10&&day>1)
        return nStr2[0]+nStr1[day];
    else if(day>10&&day<20)
        return nStr2[1]+nStr1[day-10]
    else if(day>20&& day<30)
        return nStr2[2]+nStr1[day-20];
    else if(day==20)
        return "二十";
    else if(day==30)
        return "三十";
}
//节气
function sTerm(y,n) {
   var offDate = new Date( ( 31556925974.7*(y-1900) + sTermInfo[n]*60000  ) + Date.UTC(1900,0,6,2,5) )
   return(offDate.getUTCDate())
}
//侧边工具栏
function addDate(y,m,d){
    var date = new Date(y,m-1,d);
    var year=date.getFullYear();
    var month=date.getMonth();
    var day=date.getDate();
    var week=date.getDay();
    var lunarDay;
    oCurDate.innerHTML=year+"-"+month+"-"+day;
    oCurWeekday.innerHTML="星期"+nStr1[week];
    oCurDay.innerHTML=day;
    var lunar = lunarDate(year,month+1,day);
    if(lunar.day==1){
        lunarDay="初一"    ;
    }
    else {
        lunarDay=toLunarDay(lunar.year,lunar.month,lunar.day);
    }
    oLunarDate.innerHTML = "农历"+toLunarMonth(lunar.month)+"月"+lunarDay;
    oLunarAnimal.innerHTML=Animals[(2016-4)%12+1]+"年";
}
addDate(2016,4,14);

四、效果展示

万年历(含农历)