看到百度的那个万年历了吗，咱们也来做一个吧。（代码篇）

原创声明，转载请注明出处。
咱先来看看具体效果吧，
https://dorsey.oss-cn-hangzhou.aliyuncs.com/PC/module/module/calendar.html`
具体的说明呢，请看这：原理介绍
这里只有代码
html

    
    
    
    
    
    
 body{background:linear-gradient(to left, #56655f, #000000);}
 .dc_calendar{
     width:500px;
     height:430px;
     margin:50px auto 0;
     color:#ccc;
 }
    
    





    

css

html,body,div,ol,ul,li,p,h1,h2,h3,h4,h5,h6,table,tr,td,dt,dd,span,img{margin:0;padding:0}ul,li{list-style:none}a{text-decoration:none}.dc_left{float:left}.dc_right{float:right}.dc_pointer{cursor:pointer}.dc_clear{content:"";display:block;clear:both}.dc_mar_bottom{margin-bottom:20px}.dc_p_center{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto}.dc_c_red{color:#f00}.dc_c_aaa{color:#aaa}.dcCalendar{width:100%;height:100%;min-height:230px;padding:10px;box-sizing:border-box;position:relative;box-shadow:-2px 2px 10px #fff;-webkit-box-shadow:-2px 2px 10px #fff;-moz-box-shadow:-2px 2px 10px #fff;-o-box-shadow:-2px 2px 10px #fff}.dcCalendar .calendarBtn{width:100%;height:20%}.dcCalendar .calendarBtn .dcCalendarValues{width:50%;height:3em;box-shadow:-2px 2px 10px #fff;-webkit-box-shadow:-2px 2px 10px #fff;-moz-box-shadow:-2px 2px 10px #fff;-o-box-shadow:-2px 2px 10px #fff;float:left;font-size:1em;border-radius:1.5em 1.5em 1.5em 1.5em;-webkit-border-radius:1.5em 1.5em 1.5em 1.5em;-moz-border-radius:1.5em 1.5em 1.5em 1.5em;text-align:center;line-height:3em}.dcCalendar .calendarBtn .mBtn,.dcCalendar .calendarBtn .yBtn{text-align:center;float:left;border-radius:50% 50% 50% 50%;-webkit-border-radius:50% 50% 50% 50%;-moz-border-radius:50% 50% 50% 50%;font-size:1em;box-shadow:-1px 1px 2px #fff;-webkit-box-shadow:-1px 1px 2px #fff;-moz-box-shadow:-1px 1px 2px #fff;-o-box-shadow:-1px 1px 2px #fff;cursor:pointer;margin:0 .5%}.dcCalendar .calendarBtn .yBtn{width:13%;height:3em;line-height:3em}.dcCalendar .calendarBtn .mBtn{width:10%;height:2em;line-height:2em;margin-top:.5em}.dcCalendar .calendarTable{width:100%;height:75%;margin-top:5%;padding:10px;box-sizing:border-box;text-align:center}.dcCalendar .calendarTable th{text-align:center}.dcCalendar .calendarTable td{cursor:pointer;transition:.1s}.dcCalendar .dcDateDetail{display:none;width:150px;height:80px;font:1em "Times New Roman";padding:5px;position:absolute;top:0;left:0;background:rgba(0,0,0,0.9)}.dcCalendarAddLunar{width:100%;height:100%;min-height:230px;padding:10px 0;box-sizing:border-box;position:relative;box-shadow:-2px 2px 10px #fff;-webkit-box-shadow:-2px 2px 10px #fff;-moz-box-shadow:-2px 2px 10px #fff;-o-box-shadow:-2px 2px 10px #fff;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px 5px 5px 5px}.dcCalendarAddLunar .calendarBtn{width:100%;padding:0 2%;box-sizing:border-box}.dcCalendarAddLunar .calendarBtn .dcCalendarValues{width:50%;height:3em;float:left;font-size:1em;text-align:center;line-height:3em}.dcCalendarAddLunar .calendarBtn .mBtn,.dcCalendarAddLunar .calendarBtn .yBtn{text-align:center;float:left;border-radius:50% 50% 50% 50%;-webkit-border-radius:50% 50% 50% 50%;-moz-border-radius:50% 50% 50% 50%;font-size:1em;box-shadow:-1px 1px 2px #fff;-webkit-box-shadow:-1px 1px 2px #fff;-moz-box-shadow:-1px 1px 2px #fff;-o-box-shadow:-1px 1px 2px #fff;cursor:pointer;margin:0 .5%}.dcCalendarAddLunar .calendarBtn .yBtn{width:13%;height:3em;line-height:3em}.dcCalendarAddLunar .calendarBtn .mBtn{width:10%;height:2em;line-height:2em;margin-top:.5em}.dcCalendarAddLunar .calendarBtn:after{content:"";display:block;clear:both}.dcCalendarAddLunar .calendarTable{width:100%;margin-top:10px;padding:10px;box-sizing:border-box;text-align:center}.dcCalendarAddLunar .calendarTable th{text-align:center}.dcCalendarAddLunar .calendarTable td{cursor:pointer;transition:.1s;padding:5px 0}.dcCalendarAddLunar .calendarTable td p{font-size:.3rem}.dcCalendarAddLunar .calendarTable td .solarValue{font-size:20px}.dcCalendarAddLunar .calendarTable td .lMonth{display:none}.dcCalendarAddLunar .dcDateDetail{display:none;width:150px;height:80px;font:1em "Times New Roman";padding:5px;position:absolute;top:0;left:0;background:rgba(0,0,0,0.9)}.calendarMouseMove{box-shadow:-1px 1px 5px #fff;-webkit-box-shadow:-1px 1px 5px #fff;-moz-box-shadow:-1px 1px 5px #fff;-o-box-shadow:-1px 1px 5px #fff;transform:translate3d(2px, -2px, 0)}.dcCalendar:after{content:"";display:block;clear:both}.dcAccordion{background:linear-gradient(#1d1d1d, #35ff10);width:100%;text-align:center;font:18px "华文楷体";line-height:40px}.dcAccordion a{width:100%;display:inline-block;color:#fff}.dcAccordion li ul{font:12px "微软雅黑";line-height:30px;height:0;overflow:hidden;background:rgba(255,255,255,0.2);transition:all .3s}.dcAccordion a:hover{background:rgba(255,255,255,0.3)}.dcAccordionAddAnimate{background:linear-gradient(#1d1d1d, #35ff10);width:100%;text-align:center;font:18px "华文楷体";line-height:40px}.dcAccordionAddAnimate a{width:100%;display:inline-block;color:#fff}.dcAccordionAddAnimate li ul{font:12px "微软雅黑";line-height:30px;height:0;overflow:hidden;background:rgba(255,255,255,0.2);transition:all .3s}.dcAccordionAddAnimate a:hover{background:rgba(255,255,255,0.3)}

js

;(function(win){ //前面这分号别去掉哦，防止多个js文件合并压缩时因上一个js文件末尾少";"而带来的问题。

    "use strict"; //严格模式，一般写自己类库的时候最好加上，减少一些代码不规范引起的错误。

    
    var dc_self;
    var dorseyUI=function(){
 return new dorseyUI.fn.init();
    };
    dorseyUI.fn=dorseyUI.prototype={
 constructor:dorseyUI, //接口名：是dorsey-ui的缩写。意为函数处理
 init:function(){
     dc_self=this;
     return this;
 },
 
 dcCalendar:function(obj){
     
     var calendar = {
  
  lunardata: [
      0x04bd8,0x04ae0,0x0a570,0x054d5,0x0d260,0x0d950,0x16554,0x056a0,0x09ad0,0x055d2,//1900-1909
      0x04ae0,0x0a5b6,0x0a4d0,0x0d250,0x1d255,0x0b540,0x0d6a0,0x0ada2,0x095b0,0x14977,//1910-1919
      0x04970,0x0a4b0,0x0b4b5,0x06a50,0x06d40,0x1ab54,0x02b60,0x09570,0x052f2,0x04970,//1920-1929
      0x06566,0x0d4a0,0x0ea50,0x06e95,0x05ad0,0x02b60,0x186e3,0x092e0,0x1c8d7,0x0c950,//1930-1939
      0x0d4a0,0x1d8a6,0x0b550,0x056a0,0x1a5b4,0x025d0,0x092d0,0x0d2b2,0x0a950,0x0b557,//1940-1949
      0x06ca0,0x0b550,0x15355,0x04da0,0x0a5b0,0x14573,0x052b0,0x0a9a8,0x0e950,0x06aa0,//1950-1959
      0x0aea6,0x0ab50,0x04b60,0x0aae4,0x0a570,0x05260,0x0f263,0x0d950,0x05b57,0x056a0,//1960-1969
      0x096d0,0x04dd5,0x04ad0,0x0a4d0,0x0d4d4,0x0d250,0x0d558,0x0b540,0x0b6a0,0x195a6,//1970-1979
      0x095b0,0x049b0,0x0a974,0x0a4b0,0x0b27a,0x06a50,0x06d40,0x0af46,0x0ab60,0x09570,//1980-1989
      0x04af5,0x04970,0x064b0,0x074a3,0x0ea50,0x06b58,0x055c0,0x0ab60,0x096d5,0x092e0,//1990-1999
      0x0c960,0x0d954,0x0d4a0,0x0da50,0x07552,0x056a0,0x0abb7,0x025d0,0x092d0,0x0cab5,//2000-2009
      0x0a950,0x0b4a0,0x0baa4,0x0ad50,0x055d9,0x04ba0,0x0a5b0,0x15176,0x052b0,0x0a930,//2010-2019
      0x07954,0x06aa0,0x0ad50,0x05b52,0x04b60,0x0a6e6,0x0a4e0,0x0d260,0x0ea65,0x0d530,//2020-2029
      0x05aa0,0x076a3,0x096d0,0x04bd7,0x04ad0,0x0a4d0,0x1d0b6,0x0d250,0x0d520,0x0dd45,//2030-2039
      0x0b5a0,0x056d0,0x055b2,0x049b0,0x0a577,0x0a4b0,0x0aa50,0x1b255,0x06d20,0x0ada0,//2040-2049
      0x14b63,0x09370,0x049f8,0x04970,0x064b0,0x168a6,0x0ea50,0x06b20,0x1a6c4,0x0aae0,//2050-2059
      0x0a2e0,0x0d2e3,0x0c960,0x0d557,0x0d4a0,0x0da50,0x05d55,0x056a0,0x0a6d0,0x055d4,//2060-2069
      0x052d0,0x0a9b8,0x0a950,0x0b4a0,0x0b6a6,0x0ad50,0x055a0,0x0aba4,0x0a5b0,0x052b0,//2070-2079
      0x0b273,0x06930,0x07337,0x06aa0,0x0ad50,0x14b55,0x04b60,0x0a570,0x054e4,0x0d160,//2080-2089
      0x0e968,0x0d520,0x0daa0,0x16aa6,0x056d0,0x04ae0,0x0a9d4,0x0a2d0,0x0d150,0x0f252,//2090-2099
      0x0d520],//2100
  
  sTermDate :[
      0,21208,42467,63836,85337,107014,
      128867,150921,173149,195551,218072,240693,
      263343,285989,308563,331033,353350,375494,
      397447,419210,440795,462224,483532,504758
  ],
  
  sTermChinese :[
      "立春","雨水","惊蛰","春分","清明","谷雨",
      "立夏","小满","芒种","夏至","小暑","大暑",
      "立秋","处暑","白露","秋分","寒露","霜降",
      "立冬","小雪","大雪","冬至","小寒","大寒"
  ],
  
  festivalChinese : {
      //第一季度
      "0101":"元旦",
      "0214":"情人节",
      "0308":"妇女节",
      "0312":"植树节",
      "0315":"消费者权益日",
      "0321":"世界森林日、世界儿歌日",

      //第二季度
      "0401":"愚人节",
      "0407":"世界卫生日",
      "0422":"世界地球日",
      "0501":"劳动节",
      "0504":"青年节",
      "0505":"碘缺乏病防治日",
      "0508":"世界红十字日",
      "0512":"国际护士节",
      "0515":"国际家庭日",
      "0517":"世界电信日",
      "0518":"国际博物馆日",
      "0520":"520情人节",
      "0523":"国际牛奶日",
      "0531":"世界无烟日",
      "0601":"儿童节",
      "0605":"世界环境日",
      "0606":"全国爱眼日",
      "0616":"防治荒漠化和干旱日",
      "0623":"国际奥林匹克日",
      "0625":"全国土地日",
      "0626":"国际反毒品日",

      //第三季度
      "0701":"建党节 香港回归纪念 国际建筑日",
      "0707":"中国人民抗日战争纪念日",
      "0711":"世界人口日",
      "0801":"建军节",
      "0908":"国际扫盲日",
      "0909":"毛泽东逝世纪念",
      "0910":"教师节",
      "0916":"国际臭氧层保护日",
      "0920":"国际爱牙日",
      "0927":"世界旅游日",
      "0928":"孔子诞辰",

      //第四季度
      "1001":"国庆节 国际音乐日",
      "1004":"世界动物日",
      "1006":"老人节",
      "1008":"全国高血压日 世界视觉日",
      "1009":"世界邮政日",
      "1015":"国际盲人节",
      "1016":"世界粮食日",
      "1017":"世界消除贫困日",
      "1024":"联合国日",
      "1108":"中国记者日",
      "1109":"消防宣传日",
      "1112":"孙中山诞辰纪念",
      "1114":"世界糖尿病日",
      "1117":"国际大学生节",
      "1201":"世界艾滋病日",
      "1203":"世界残疾人日",
      "1209":"世界足球日",
      "1220":"澳门回归纪念",
      "1225":"圣诞节",
      "1226":"毛泽东诞辰纪念",
      "1229":"国际生物多样性日"
  },
  
  lFestivalChinese : {
      "0101" : "春节",
      "0202" : "头牙",
      "0115" : "元宵节",
      "0505" : "端午节",
      "0707" : "七巧节",
      "0715" : "中元节",
      "0815" : "中秋节",
      "0909" : "重阳节",
      "1208" : "腊八节",
      "1216" : "尾牙",
      "1223" : "小年",
      "0100" : "除夕"
  },
  
  lDecade : ["初","十","廿","三"],
  
  lDate : ["一","二","三","四","五","六","七","八","九","十"],
  
  lMonthArr : ["正","二","三","四","五","六","七","八","九","十","冬","腊"],
  
  heavenlyStems : ["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"],
  
  terrestrialBranch : ["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"],
  
  animals : ["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"],
  
  dateFunction : function(){
      return new Date();
  },
  
  thisTime : function(){
      var _self = this;
      var year = _self.dateFunction().getFullYear(),//获取年
   month = _self.dateFunction().getMonth(),//获取月
   today = _self.dateFunction().getDate(),//获取日
   weekNum = _self.dateFunction().getDay(),//获取星期
   hour = _self.dateFunction().getHours(),//获取小时
   minute = _self.dateFunction().getMinutes(),//获取分钟
   second = _self.dateFunction().getSeconds();//获取秒
      return [year,month,today,weekNum,hour,minute,second]; //返回所需数据
  },
  
  isLeapYear : function(year){
      var flag;
      year%4===0?(year%100!==0?flag=1:(year%400===0?flag=1:flag=0)):flag=0;//闰年处理
      return flag;
  },
  monthDates : function(y){
      return [31,28+this.isLeapYear(y),31,30,31,30,31,31,30,31,30,31];
  },
  week : ['日','一','二','三','四','五','六'],
  
  lunarTran : function(y){

      var lunarData=this.lunarData[y-1900];

      var hexadecimal=lunarData.toString(16),
   head=Math.floor(lunarData/65536).toString(2), //头部说明闰月是大月还是小月
   center=Math.floor((lunarData%65536)/16).toString(2),//中部说明哪个月是大月哪个是小月的二进制数
   end=lunarData%16; //尾部说明哪个月是闰月，没有闰月则为0
      //字符串补全处理
      if(center.length < 12){
   var i = 12-center.length;
   while(i--){
center = "0"+center;
   }
      }
      hexadecimal.length !== 5 ? hexadecimal="0x0"+hexadecimal : hexadecimal="0x"+hexadecimal;//16进制数
      var bigMonthNum=(center+head).match(new RegExp('1','g')).length,//输出大月个数
   monthDetail=center.split(''); //把二进制整合成一个数组

      end !== 0 ? monthDetail.splice(end,0,head) : end ; //把尾部是否为闰月的月份插回去

      var everyMonthDays = []; //用于输出每一年所有月份的天数，包括闰月
      for(var i=0;i> (m+1))) ? 30 : 29;
  },
  
  daysInPreMonth : function(y,m){
      var _self = this,
   obj = _self.lunarTran(y);  //获取今年日历对象
      var days;

      //分两种情况进行讨论，上个月在今年跟上个月在上一年
      if(m > 0){
   if(obj.isBigLeadMonth === "1" && m === obj.whichIsLeadMonth+1){ //如果该年是闰年且m为闰年后第一个月，则
return (obj.isBigLeadMonth === 0 ? 29 : 30);
   }
   else {
return _self.daysInMonth(y,m-1);
   }
      }
      else{
   var objPre = _self.lunarTran(y-1); //获取上一年日历对象
   return objPre.everyMonthDays[objPre.everyMonthDays.length-1];
      }
      //上面的比较啰嗦，这是简化版，你把这里注释掉用上面的也是可以哈，相对比较直观明了。
      // m > 0 ? ((obj.isBigLeadMonth === "1" && m === obj.whichIsLeadMonth+1)? days =(obj.isBigLeadMonth === 0 ? 29 : 30) :
      //     days =_self.daysInMonth(y,m-1)) : days = objPre.everyMonthDays[objPre.everyMonthDays.length-1];
      //
      // return days;
  },
  
  lFirstDayInEveryYears : function(y){
      var _self = this;
      //我们需要计算任意一天距离1900年1月31日的偏移量，单位（天）;
      var baseDate =new Date(1900,0,31).getTime(),
   offset = Math.floor((new Date(y,0,1).getTime()-baseDate)/86400000),//计算偏移量
   mOffset=2;//月份偏移量：比如说1月1号是落在农历的11月份还是12月份
      if(y === 1900){
   offset = 0;
   mOffset = 1;
      }
      else{
   for(var i=1900;i日一二三四五六' +
  '' +
  '' +
  '' +
  '' +
  '' +
  '' +
  '' +
  '');
     obj.append(table);
     obj.append($(''));
     
     var $tBody=$('.calendarTbody'),//万年历每张日历表的容器
  $dateDetail=$('.dcDateDetail'),//每个日期对应的详情页，显示农历节日等等
  $CalendarValues=$('.dcCalendarValues');//日历上方当前日期简介
     
     var update=function(){
  var firstDay=new Date(year,month,1),//获取每个月的第一天
      dayOfWeek=firstDay.getDay();//这个月第一天的世界时去转换成星期几

  var arr=calendar.solarToLunar(year,month);
      // lMonth = month-arr[1]; //农历的月份

  $tBody.find('td').css("color","").css("opacity","");//清空原有样式
  for(var j=0;j<6;j++){
      for(var i=0;i<7;i++){
   rel=j*7+i-dayOfWeek+1;//rel就是原本的1~42，减掉第一天对应的星期数再后续做判断
   if(rel<=0){
var month0=month-1;
month0<0?month0=11:month0;
$tBody.find('tr').eq(j).find('td').eq(i).html(rel+monthDates[month0]).css("opacity","0.3");
   }
   else if(rel>monthDates[month]){
$tBody.find('tr').eq(j).find('td').eq(i).html(rel-monthDates[month]).css("opacity","0.3");
   }
   else{
// // 1对应农历十八，这部分的算法非常的渣，不过呢，写到这我已经有点精疲力尽了，让我歇会吧。

var a=rel+arr[0]-1;
var m=month-arr[1]+1,
    y=year;
if(m<0){
    m+=12;
    y--;
}
a%=calendar.daysInPreMonth(y,m);
var b=calendar.numToLunar(a);
// lMonth < 0 ? lMonth +=calendar.lunarTran(year).everyMonthDays.length : lMonth;
// lMonth %= calendar.lunarTran(year).everyMonthDays.length;
$tBody.find('tr').eq(j).find('td').eq(i).html("
"+rel+"
"+"
"+b+"
");

if(rel===thisTime[2]&&year===thisTime[0]&&month===thisTime[1]){
    $tBody.find('tr').eq(j).find('td').eq(i).css("color","red");
}
   }
      }
  }
  $CalendarValues.html(year+'年'+(month+1)+'月'+today+'日 星期'+week[weekNum]+'');//每次更新重写日期简介
     };
     update();//初始化
     
     $('.calendarBtn span').click(function(){
  // console.log($(this).index());
  switch($(this).index()){
      case 0 : year-=1;break;
      case 1 : {
   month-=1;
   if(month<0){month=11;year-=1;}
   break;
      }
      case 3 : {
   month+=1;
   if(month>11){month=0;year+=1;}
   break;
      }
      case 4: year+=1;break;
  }
  update();
     });
     
     $tBody.mouseover(function(){
  $dateDetail.css("display","block");
     });
     $tBody.mouseout(function(){
  $dateDetail.css("display","none");
     });
     
     $tBody.find('td').each(function(){
  $(this).mousemove(function(e){
      e=e||window.event;
      detailX=e.pageX-$tBody.offset().left;
      detailY=e.pageY-obj.offset().top;
      $dateDetail.css({
   left:(detailX+30)+"px",
   top:(detailY)+"px"
      });
      if($(this).css("opacity")==="1"){
   $CalendarValues.html(year+'年'+(month+1)+'月'+$(this).children('.solarValue').html()+'日 星期'+week[$(this).index()%7]+'');
   $tBody.find('td').removeClass('calendarMouseMove');
   $(this).addClass('calendarMouseMove');
   
   var festivalDate;//阳历节日变量
   var fm=month+1,
dm=$(this).children('.solarValue').html();
   fm<10?fm="0"+fm:fm;
   dm<10?dm="0"+dm:dm;
   if(calendar.festivalChinese[fm+dm]!==undefined){
festivalDate=calendar.festivalChinese[fm+dm];
   }
   else{
festivalDate="";
   }
   
   $dateDetail.html($CalendarValues.html()+"
"+festivalDate+"
");

      }
  });
     });

     
     if(obj.width()<270){
  obj.css("font-size","5px");
  obj.find(".dcCalendarValues").find('span').css("display","none");
     }
 }
    };
    dorseyUI=dorseyUI.fn.init.fn=dorseyUI.fn;
    win.dorseyUI=dorseyUI;
})(window);