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

本文主要介绍了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程序设计有所帮助。

以上就是js实现带农历和八字等信息的日历特效的详细内容，更多请关注本站其它相关文章！