自己也尝试着做了一下,收获蛮大,掌握了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实现带农历和八字等信息的日历特效的详细内容,更多请关注本站其它相关文章!