js实现一个现实考勤信息的日历效果代码
代码语言:html
所属分类:图表
代码描述:js实现一个现实考勤信息的日历效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> body{background: #fafafa;} ol,ul{list-style:none;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;} /*日历*/ #schedule-Setup, #schedule-Setup2, #schedule-Setup3 { padding-top: 35px; } #schedule-Setup .dayStyle, #schedule-Setup2 .dayStyle, #schedule-Setup3 .dayStyle { width: 60px; height: 60px; line-height: 60px; font-size: 24px; } #schedule-box { /* width: 320px; */ width: 100%; margin: 20px auto; padding: 35px 20px; font-size: 13px; } .schedule-hd { display: flex; justify-content: center; padding: 0 15px; height: 50px; line-height: 50px; border-bottom: 1px solid #f3f3f3; margin-bottom: 10px; } .today { text-align: center; max-width: 180px; font-size: 24px; margin: 0 20px; color: #333333; } /*.ul-box{ overflow: hidden; }*/ .clearfix:after{ display: block; content: "."; height: 0; visibility: hidden; clear: both; font-size: 0; line-height: 0; } .ul-box>li { float: left; width: 14.28%; text-align: center; padding: 5px 0; position: relative; } .ul-box>li .date-active{background: #0592FE; color: #FFFFFF;} #schedule-Setup .week-ul, #schedule-Setup2 .week-ul, #schedule-Setup3 .week-ul { padding-bottom: 20px; } #schedule-Setup .ul-box>li, #schedule-Setup2 .ul-box>li, #schedule-Setup3 .ul-box>li { font-size: 24px; } #schedule-Setup .schedule-hd, #schedule-Setup2 .schedule-hd, #schedule-Setup3 .schedule-hd { display: none; } .prevYear { position: absolute; left: 10px; } .nextYear { position: absolute; right: 10px; padding-right: 15px; } .nextYear:before { position: absolute; right: 0px; } .other-month { color: #D5D5D5; } .current-month { position: relative; color: #333333; } .zc_day:hover~.day_time { display: block; } .ls_day:hover~.day_time { display: block; } .qq-style:hover~.day_time { display: block; } .day_time { font-size: 14px; text-align: left; border-radius: 5px; position: absolute; left: 100%; top: 5px; width: 120px; height: 70px; background: rgba(0, 0, 0, 0.7); display: none; color: white; padding: 5px; line-height: 30px; z-index: 111; padding-left: 12.5px; box-sizing: border-box; } .day_time:after { content: ""; position: absolute; left: -5px; top: 10px; width: 0; height: 0; border-top: 5px solid transparent; border-right: 5px solid rgba(0, 0, 0, 0.7); border-bottom: 5px solid transparent; } .today-style { border-radius: 50%; background: rgb(5, 146, 254); } .arrow { cursor: pointer; } .dayStyle { display: inline-block; width: 30px; height: 30px; border-radius: 50%; text-align: center; line-height: 30px; font-size: 14px; cursor: default; position: relative; z-index: 1; } .dayStyle:before{ position: absolute; z-index: 11; content: ""; top:0; left: 0; width: 100%; height: 100%; } /*.current-month > .dayStyle:hover{ background:rgb(153,170,182) !important; color: #fff; }*/ .zc_day { background: rgb(5, 146, 254); color: #ffffff; box-shadow: 0px 5px 9px 0px rgba(179, 222, 255, 1); } .ls_day { background: #99AAB6; color: #ffffff; box-shadow: 0px 2px 4px 0px rgba(233, 233, 233, 1); } .current-month .select_day { background: rgb(5, 146, 254); color: #ffffff; box-shadow: 0px 5px 9px 0px rgba(179, 222, 255, 1); } /*.current-month .select_day:hover{ background: rgb(5,146,254) !important; }*/ /* /* /* .today-flag{ background: rgb(5,146,254) ; color: #ffffff; }*/ .xx_day:after { content: "休"; position: absolute; font-size: 14px; right: 8px; top: 50%; margin-top: -7px; height: 14px; line-height: 14px; display: inline-block; color: #0592FE; } .selected-style { background: rgb(5, 146, 254); color: #ffffff; } .qq-style { background: rgb(233, 67, 53) !important; color: white; position: relative; } .rest-style{ background: rgb(51 178 14) !important; color: white; position: relative; } .Attendance{ padding:5px 0; border-bottom:1px solid #D5D5D5;} .Attendance li{ height: 40px; line-height: 40px; text-align: center;} .Attendance li span{ padding: 3px 15px;border-radius: 5px; margin-right: 5px;} .Attendance li span.normal{background: #0592FE;} .Attendance li span.Absent{background: rgb(233, 67, 53) !important;} .Attendance li span.Vacation{background:rgb(51 178 14);} .box { width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -moz-box-align: justify; -ms-flex-align: center; justify-content: space-between; align-content: center; } .box-flex { -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; position: relative; } /*.qq-style:after{ width: 5px; height: 5px; border-radius: 50%; background:red ; position: absolute; content: ""; left: 50%; margin-left: -2.5px; bottom:-7.5px; }*/ #h3Ele { text-align: center; padding: 10px; } .index_frame_left { position: absolute; left: 0; right: 420px; top: 30px; bottom: 0; } .index_frame_leftTop { border-radius: 10px; width: 450px; min-height: 300px; background: white; position: relative; margin: 0 auto; } .index_frame_leftBottom { border-radius: 10px; width: 450px; height: 300px; background: white; position: relative; margin: 10px auto; } .index_liTLeft { position: absolute; left: 60px; bottom: 5px; border-radius: 50%; width: 20px; height: 20px; background: rgb(245, 246, 250); } .index_liTRight { position: absolute; right: 60px; bottom: 5px; border-radius: 50%; width: 20px; height: 20px; background: rgb(245, 246, 250); } .index_liBLeft { position: absolute; left: 60px; top: 5px; border-radius: 50%; width: 20px; height: 20px; background: rgb(245, 246, 250); } .index_liBRight { position: absolute; right: 60px; top: 5px; border-radius: 50%; width: 20px; height: 20px; background: rgb(245, 246, 250); } .index_liTline { z-index: 1; position: absolute; left: 50%; margin-left: -5px; top: 10px; width: 10px; height: 40px; background: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 5px; } .index_frame_leftBottom_Top { width: 100%; height: 145px; } .index_frame_leftBottom_Top div { float: left; width: 25%; position: relative; } .index_frame_leftBottom_Top div>span { position: absolute; bottom: 7px; width: 100%; text-align: center; left: 0; } .index_frame_leftBottom_bottom { width: 100%; height: 150px; border-top: 1px solid rgb(238, 238, 238); } .index_frame_leftBottom_bottom>div { text-align: center; padding: 15px 0; float: left; width: 33.3333333%; border-right: 1px solid rgb(238, 238, 238); height: 78px; box-sizing: border-box; border-bottom: 1px solid rgb(238, 238, 238); } .index_frame_leftBottom_bottom>div:nth-of-type(3n) { border-right: 0; } .index_frame_leftBottom_bottom>div>span:first-of-type { color: #333333; font-size: 24px; display: block; line-height: 24px; } .index_frame_leftBottom_bottom>div>span:last-of-type { color: #666666; font-size: 12px; display: block; } .index_frame_leftCenter { position: absolute; left: 470px; right: 0; top: 0px; height: 640px; background: white; border-radius: 10px; } .index_frame_leftCenter_bottom { width: 100%; height: 230px; border-top: 1px solid rgb(238, 238, 238); float: left; background: url(../../assets/img/index/attendance_bg_pen.png) no-repeat; background-position-x: 93%; background-position-y: 30px; } .index_frame_leftCenter_bottom>div { text-align: center; padding: 35px 0; float: left; width: 20%; border-right: 1px solid rgb(238, 238, 238); height: 112px; box-sizing: border-box; border-bottom: 1px solid rgb(238, 238, 238); } .index_frame_leftCenter_bottom>div>span:first-of-type { color: #333333; font-size: 24px; display: block; line-height: 24px; } .index_frame_leftCenter_bottom>div>span:last-of-type { color: #666666; font-size: 12px; display: block; } .index_frame_leftFooter { position: absolute; width: 100%; height: 280px; top: 660px; background: white; border-radius: 10px; margin-bottom: 20px; } </style> <link rel="stylesheet" href="//at.alicdn.com/t/font_234130_nem7eskcrkpdgqfr.css"> <!--阿里图标库--> <style type="text/css"> .shili{width:450px ; margin: 0 auto;} .shili h2{font-weight: normal; margin-bottom: 10px;font-size: 18px; margin-top: 20px;} </style> </head> <body> <div class="shili"> <h2>演示示例1-时间段操作</h2> <div class="index_frame_leftTop"> <div id='schedule-boxS'></div> <div id="shuju"></div> </div> </div> <div class="shili"> <h2>演示示例2-当前日期操作</h2> <div class="index_frame_leftTop"> <div id='schedule-box2'></div> <div id="shuju1"></div> </div> </div> <div class="shili"> <h2>演示示例3-考勤记录</h2> <div class="index_frame_leftTop"> <ul class="box Attendance"> <li class="box-flex"><span class="normal"></span>正常</li> <li class="box-flex"><span class="Absent"></span>缺勤</li> <li class="box-flex"><span class="Vacation"></span>休假</li> </ul> <div id='schedule-box3'></div> </div> </div> <script type="text/javascript" charset="utf-8"> ; (function(undefined) { var _global; //工具函数 //配置合并 function extend(def, opt, override) { for(var k in opt) { if(opt.hasOwnProperty(k) && (!def.hasOwnProperty(k) || override)) { def[k] = opt[k] } } return def; } //日期格式化 function formartDate(y, m, d, symbol) { symbol = symbol || '-'; m = (m.toString())[1] ? m : '0' + m; d = (d.toString())[1] ? d : '0' + d; return y + symbol + m + symbol + d } function Schedule(opt) { var def = {}, opt = extend(def, opt, true), curDate = opt.date ? new Date(opt.date) : new Date(), year = opt.selectYear || curDate.getFullYear(), month = opt.selectMonth || curDate.getMonth(), day = curDate.getDate(), currentYear = curDate.getFullYear(), currentMonth = curDate.getMonth(), currentDay = curDate.getDate(), selectedDate = '', //缺勤 qqDate = opt.qqDate || "", zcDate = opt.zcDate || "", restDate=opt.restDate || "", datearray=[], el = document.querySelector(opt.el) || document.querySelector('body'), period=opt.period||"", _this = this; var bindEvent = function() { // if(el.dataset['cc']){ el.addEventListener('click', function(e) { switch(e.target.id) { case 'nextMonth': _this.nextMonthFun(); break; case 'nextYear': _this.nextYearFun(); break; case 'prevMonth': _this.prevMonthFun(); break; case 'prevYear': _this.prevYearFun(); break; default: break; }; if(e.target.className.indexOf('currentDate') > -1) { opt.clickCb && opt.clickCb(year, month + 1, e.target.innerHTML,e.target); selectedDate = e.target.title; day = e.target.innerHTML; //render(); _this.clickeventFun(day,e.target); } }, false) // el.dataset['cc']=1; // } } var init = function() { var scheduleHd = '<div class="schedule-hd">' + '<div class="arrow icon iconfont icon-112leftarrowhead prevYear" id="prevYear">上一年</div><div>' + '<span class="arrow ico.........完整代码请登录后点击上方下载按钮下载查看
网友评论0