js实现带农历和八字等信息的日历特效

自己也尝试着做了一下，收获蛮大，掌握了js日历特效的实现原理后，再想增加更多的功能，完全就可以自由发挥了，先在这里分享一下吧，有兴趣的可以试试！

本文实例为大家分享了js实现带农历等信息的日历特效，代码量很大，供大家参考，具体内容如下

效果图：

实现代码：

  
    
    
    
    
    
    
      body {
 margin: 0px;
 padding: 0px;
      }
    
  

  
    

      

 

   

     
#cal {
  width: 434px;
  border: 1px solid #c3d9ff;
  font-size: 12px;
  margin: 8px 0 0 15px;
}

#cal #top {
  height: 29px;
  line-height: 29px;
  background: #e7eef8;
  color: #003784;
  padding-left: 30px;
}

#cal #top select {
  font-size: 12px;
}

#cal #top input {
  padding: 0;
}

#cal ul#wk {
  margin: 0;
  padding: 0;
  height: 25px;
}

#cal ul#wk li {
  float: left;
  width: 60px;
  text-align: center;
  line-height: 25px;
  list-style: none;
}

#cal ul#wk li b {
  font-weight: normal;
  color: #c60b02;
}

#cal #cm {
  clear: left;
  border-top: 1px solid #ddd;
  border-bottom: 1px dotted #ddd;
  position: relative;
}

#cal #cm .cell {
  position: absolute;
  width: 42px;
  height: 36px;
  text-align: center;
  margin: 0 0 0 9px;
}

#cal #cm .cell .so {
  font: bold 16px arial;
}

#cal #bm {
  text-align: right;
  height: 24px;
  line-height: 24px;
  padding: 0 13px 0 0;
}

#cal #bm a {
  color: 7977ce;
}

#cal #fd {
  display: none;
  position: absolute;
  border: 1px solid #dddddf;
  background: #feffcd;
  padding: 10px;
  line-height: 21px;
  width: 150px;
}

#cal #fd b {
  font-weight: normal;
  color: #c60a00;
}
     
     
     
公元  年 月农历年[年]

  
一
  
二
  
三
  
四
  
五
  
六
  
日


历史上的今天
     
   
 
      
    
  
  

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。