<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>團隊列表</title> <script type="text/javascript" src="js/jquery.min.js" ></script> <style> *{ padding:0; margin:0; font-size: 12px; } table{ border-collapse:collapse; border-spacing:0; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; font-size:0; } .clearfix{ zoom:1; } .main{ padding:20px; } .table{ margin-bottom:0; } /*時間軸開始*/ .proTable{ border:1px solid #ddd; border-bottom:0px solid #ddd; } .proTableBack{ background:#f7f7f7; } .proTableColor{ background: #CCE8CF; } .proTableLast{ border-bottom:1px solid #ddd; } .proTableL,.proTableR{ float:left; display: block; } .proTableL{ width:200px; text-align: center; height:100%; } .proTableL h2{ height:40px; line-height: 40px; } .proTableR{ border-left:1px solid #ddd; overflow:auto; } /*表格樣式*/ .pro_tableChild tr th,.pro_tableChild tr td{ width:50px; height:40px; line-height:40px; border:0px solid #ddd; text-align:center; } .pro_tableChild tr th{ border-right:1px solid #ddd; } .list{ width:100%; height:40px; position: relative; } .proList{ height:30px; line-height:30px; background:#fff; float:left; text-align: center; color:#fff; position: absolute; left:0; top:5px; } /*紅色*/ .listRed{ background: #f00; border:1px solid #e50530; } /*綠色*/ .listGrenn{ background: #1fdd00; border:1px solid #256402; } /*灰色*/ .listhui{ background: #bfc3bc; border:1px solid #808080; } /*時間軸結束*/ /* 設置滾動條的樣式 */ ::-webkit-scrollbar { width:0px; height:3px; } /* 滾動槽 */ ::-webkit-scrollbar-track { background:rgba(0,0,0,0.3); } /* 滾動條滑塊 */ ::-webkit-scrollbar-thumb { background: rgba(65,128,231,0.5); cursor: pointer; } ::-webkit-scrollbar-thumb:window-inactive { background: rgba(65,128,231,0.7); cursor: pointer; } </style> </head> <body> <div class="main"> <div class="proTable proTableBack clearfix"> <div class="proTableL"> <h2>任務名稱</h2> </div> <div class="proTableR"> <table class="pro_tableChild" id="pro_tableChild" cellspacing="0" cellpadding="0"> <thead> <tr> <th>12-1</th> <th>12-2</th> <th>12-3</th> <th>12-4</th> <th>12-5</th> <th>12-6</th> <th>12-7</th> <th>12-8</th> <th>12-9</th> <th>12-10</th> <th>12-11</th> <th>12-12</th> <th>12-13</th> <th>12-14</th> <th>12-15</th> <th>12-16</th> <th>12-17</th> <th>12-18</th> <th>12-19</th> <th>12-20</th> <th>12-21</th> <th>12-22</th> <th>12-23</th> <th>12-24</th> <th>12-25</th> <th>12-26</th> <th>12-27</th> <th>12-28</th> <th>12-29</th> <th>12-30</th> </tr> </thead> </table> </div> </div> <div class="proTable proTableColor proTableLast clearfix"> <div class="proTableL"> <h2>任務名稱11</h2> </div> <div class="proTableR"> <div class="list clearfix"> <div id="proList1" class="proList" style="left:50px;width:100px;background:#1fdd00background:#00f;">一季度姐啊三季度撒艱苦的</div> <div id="proList3" class="proList">czxz</div> </div> <div class="list clearfix"> <div id="proList2" class="proList">aaxa</div> </div> </div> </div> </div> <script> //給右邊計算寬度 proTableWdith(); function proTableWdith(){ var mianW=$(".main").width(); if($(".proTableL").width()>10){ var tableChildW=mianW-$(".proTableL").width()-5; }else{ var tableChildW=mianW-5; } $(".proTableR").width(tableChildW); }; //把時間換成毫秒 function strrest(time){ var strtime = (time).replace(/-/g,"/"); var date1 = new Date(strtime); return parseInt(date1.getTime()); } //計算多少天 function dayN(startTime,endTime){ var time1 = strrest(startTime); var time2 = strrest(endTime); var sysTime = (time2 - time1)/(1000*60*60*24); return sysTime; } //進度條向左移動多少,寬度為多少; //proList1對象ID,allstartTime所有的開始時間,startTime為任務的開始時間,endTime結束時間,className添加的顏色 function strLeft(str,allstartTime,startTime,endTime,className){ var obj=$("#"+str+""); obj.addClass(className); //計算距離左邊多少px var dayNew1=dayN(allstartTime,startTime); var dayNew1MarinLeft=dayNew1*50+"px"; //計算進度條寬度 var dayNew2=dayN(startTime,endTime); var dayNew2Width=dayNew2*50+"px"; obj.css({"left":""+dayNew1MarinLeft+"","width":""+dayNew2Width+""}); } strLeft("proList1","2016-12-01","2016-12-04","2016-12-08","listGrenn"); strLeft("proList3","2016-12-01","2016-12-08","2016-12-12","listGrenn"); strLeft("proList2","2016-12-01","2016-12-02","2016-12-12","listRed"); </script> </body> </html>