jQuery考勤时间段记录代码

2024-10-30 17:07:14

1、新建html文档。

2、书写hmtl代码。<div class="kaoqing" id="demo1"></div><button id="getdata">获得数据</button><div id="answer"></div>

3、书写css代码。.kaoqing { /*width: 800px;*/}* { box-sizing: border-box; }body { background-color: #e3e3e3; }.bar { background-color: #fff; border: 1px solid #555; position: relative; margin: 0 auto 20px 0; height: 20px; width: calc(100% + 1px); width: -webkit-calc(100% + 1px); }/*刻度*/.day { position: relative; margin: 20px auto 0 0; height: 10px; box-sizing: border-box; }.day .hour { position: absolute; border-left: 1px solid #555; height: 10px; width: calc(1 / 24 * 100%);}.day .halfhour { position: absolute; border-left: 1px solid #555; height: 7px; width: 50%; top: 4px; }.day .hour:after { position: absolute; top: -15px; font: 11px/1 sans-serif; }.day .hour:nth-of-type(1) { left: 0%; }.day .hour:nth-of-type(1):after { content: "0"; }.day .hour:nth-of-type(2) { left: calc(1 / 24 * 1 * 100%);}

4、书写并添加js代码。<script src="js/jquery-1.9.1.min.js"></script><script src="js/drag4.js"></script><script> $(function() { //开始时间和结束时间的日期应该是同一天，不支持跨天, //日期格式要标准，yyyy-MM-dd hh:mm:ss// console.log(new Date("2018-03-07 12:30:00")) var data3 = [{ startime: '2018-03-07 01:30:00', endtime: '2018-03-07 23:00:00' }, { startime: '2018-03-08 01:30:00', endtime: '2018-03-08 05:30:00' }, { startime: '2018-03-05 16:30:00', endtime: '2018-03-05 20:30:00' }, { startime: '2018-03-05 01:30:00', endtime: '2018-03-05 02:00:00' } ]; data3=[]; var juicy = $("#demo1").initJuicy({ width: 800, mondayDate: '2018-03-05', timedata: data3, status: true, //false表示不能编辑，true可以编辑 }); $("#getdata").click(function() { var backdata = juicy.getdata(); console.log(backdata); $("#answer").html(JSON.stringify(backdata)) }) })</script>

5、代码整体结构。

6、查看效果。