layui实现带农历显示的日历代码
代码语言:html
所属分类:其他
代码描述:layui实现带农历显示的日历代码,配合农历与公历互转插件实现。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/layui/css/layui.css"> <style> @charset "utf-8"; body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,img { border:medium none; margin:0; padding:0; font-size:100%; list-style:none } body,button,input,select,textarea { font-size:14px; line-height:1.5; font-family:'PingFang SC Regular',Helvetica,Tahoma,Arial,Microsoft YaHei,Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif } h1,h2,h3,h4,h5,h6 { font-weight:normal } em { font-style:normal } ul,ol { list-style:none } input[type='text'],input[type='password'],button { background:0; border:0; outline:0; -webkit-appearance:none } textarea { resize:none } a { text-decoration:none; color:#333 } a:hover { text-decoration:none; color:#37b4f9; -moz-transition:all .3s ease-in; -webkit-transition:all .3s ease-in; -o-transition:all .3s ease-in; transition:all .3s ease-in } *box { box-sizing:border-box } img { border:0; outline-width:0; vertical-align:middle } .fl { float:left } .fr { float:right } .clearfix,.row { *zoom:1 } .clearfix:after,.row:after { content:''; clear:both; display:block } .layout { width:1280px; margin:0 auto } @media screen and (max-width:320px) { html { font-size:44.44px } }@media screen and (min-width:321px) and (max-width:375px) { html { font-size:52.08px } }@media screen and (min-width:376px) and (max-width:414px) { html { font-size:57.5px } }@media screen and (max-width:1280px) { .layout { width:96% } }::-webkit-scrollbar { width:0; height:0; background-color:#f5f5f5 } ::-webkit-scrollbar-track { -webkit-box-shadow:inset 0 0 6px#F5F5F5; border-radius:10px; background-color:#f5f5f5 } ::-webkit-scrollbar-thumb { border-radius:10px; -webkit-box-shadow:inset 0 0 6px #f5f5f5; background-color:#555 } .warp_box { width:50%; height:380px; margin:20px auto } .list_h3 { text-align:center; font-size:30px; line-height:40px; color:#1890ff } .date_box { padding:20px 20px 20px 0; background-color:#fff; box-shadow:5px 8px 15px 0 rgba(222,222,222,0.5); border-radius:10px; min-height:395px; border:1px solid #ccc } .date_box .date_center { padding:0 20px 0 0 } .date_box .date_top { height:36px; padding:0 20px } .date_box .date_top .tody { font-family:MicrosoftYaHei; font-size:28px; font-weight:normal; font-stretch:normal; letter-spacing:0; color:#000; line-height:36px; margin-right:20px; width:32px } .date_box .date_top .date_action { margin:12px 0 0 } .date_box .date_top .date_action i { display:inline-block; font-size:10px; cursor:pointer } .date_box .date_top .date_action .icon_left { transform:rotate(180deg) } .date_box .date_top .date_action span { font-family:MicrosoftYaHei; font-size:14px; font-weight:normal; font-stretch:normal; letter-spacing:0; color:#a2a0a0 } .date_box .date_top .date_action .rigth_action { line-height:36px } .date_box .date_top .date_action span { width:80px; display:inline-block; height:20px; background-color:#fff; border-radius:5px; border:solid 1px #a2a0a0; cursor:pointer; padding:0 10px; box-sizing:border-box } .date_box .date_top .date_action .add { background-color:#2c6ce1; border-radius:5px; margin:0 0 0 10px; color:#fff } .date_box .date_header { height:24px } .date_box .date_header .week_item { float:left; height:24px; width:14.28%; line-height:24px; font-family:MicrosoftYaHei; font-size:13px; font-weight:normal; font-stretch:normal; letter-spacing:0; color:#a2a0a0; text-align:center } .date_box .day_item .day_list { float:left; width:14.28%; height:40px; text-align:center; padding:10px 0 0 0 } .date_box .day_item .day_list .day_center { box-sizing:border-box; padding:4px 0 0 0; width:50px; height:50px; border-radius:50%; margin:0 auto; cursor:pointer; position:relative } .date_box .day_item .day_list .day_center .dayone { font-family:MicrosoftYaHei; font-size:16px; font-weight:normal; font-stretch:normal; letter-spacing:0; color:#fff; text-align:center; line-height:22px } .date_box .day_item .day_list .day_center .daytwo { font-family:MicrosoftYaHei; font-size:10px; font-weight:normal; font-stretch:normal; letter-spacing:0; color:#fff; text-align:center; display:block } .date_box .day_item .day_list .day_center .dayshark { width:4px; height:4px; background:#4285f4; margin:0 auto; display:inline-block; border-radius:50%; position:absolute; bottom:2px; left:50%; color:#fff } .date_box .day_item .day_list .day_center:hover { background:#2c6ce1; color:#fff } .date_box .day_item .day_list .day_center:hover .dayone,.date_box .day_item .day_list .day_center:hover .daytwo { color:#fff } .date_box .day_item .day_list .day_center:hover .term { color:#fff } .date_box .day_item .day_list .day_center .dayone,.date_box .day_item .day_list .day_center .daytwo,.date_box .day_item .day_list .day_center .dayshark { color:#000 } .date_box .day_item .day_list .day_center .dayshark { background:#fff } .date_box .day_item .day_list .day_center .term { color:#2c6ce1; font-size:8px } .date_box .day_item .day_list .nullDom { display:none } .date_box .day_item .day_list .today { border:1px solid #2c6ce1 } .date_box .day_item .day_list .showdate { background:#2c6ce1; color:#fff } .date_box .day_item .day_list .showdate .dayone,.date_box .day_item .day_list .showdate .daytwo,.date_box .day_item .day_list .showdate .dayshark { color:#fff } .date_box .day_item .day_list .showdate .dayshark { background:#fff } .date_box .day_item .day_list .tips { background:#2c6ce1; color:#fff; padding:5px } .date_box .day_item .nowNonth .day_center .dayone { color:#ccc } .date_box .day_item .nowNonth .day_center .daytwo { color:#ccc } .date_box .day_item .nowNonth .day_center .term { color:#ccc!important; font-size:8px!important } .tips { margin-top:20px; text-align:center } .tips a { display:block; color:#1890ff } @media screen and (max-width:1300px) { .h4_tips { display:none } .items_titele { width:100%; text-align:center; font:17px/30px MicrosoftYaHei; height:40px!important; color:#fff; padding:6px!important; box-sizing:border-box; background-size:100% } } </style> </head> <body> <div class="warp_box"> <h3 class="list_h3">日历带农历显示</h3> <div class="date_box"> <div class="layui-row layui-col-space10"> <div class="date_center"> <div class="clearfix date_top"> <div class="fl tody"></div> <div class="date_action fl"><i class="layui-icon layui-icon-triangle-r icon_left"></i><span class="today_span"></span><i class="layui-icon layui-icon-triangle-r icon_right"></i></div> <div class="rigth_action fr"><span class="current">今天 </span><span class="add">添加 </span></div> </div> <div class="clearfix date_header"> <div class="week_item">日</div> <div class="week_item">一</div> <div class="week_item">二</div> <div class="week_item">三</div> <div class="week_item">四</div> <div class="week_item">五</div> <div class="week_item">六</div> </div> <div class="clearfix day_item" id="day_item"></div> </div> </div> </div> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/layui/layui.all.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/calendar.1.0.3 .js"></script> <script> // 获取当前年月日' var curTime = new Date(), curYear = curTime.getFullYear(), curMonth = curTime.getMonth(),.........完整代码请登录后点击上方下载按钮下载查看
网友评论0