时间进度条，根据时间，显⽰任务进度条
<!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;
}
/*表格样式*/
.
javascript进度条
pro_tableChild tr th,.pro_tableChild tr td{
width:50px;
height:40px;
line-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">
<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" >⼀季度啊三季度撒艰苦的</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{
}else{
var tableChildW=mianW-5;
}
$(".proTableR").width(tableChildW);
};
//把时间换成毫秒
function strrest(time){
var strtime = (time).replace(/-/g,"/");
var date1 = new Date(strtime);
return Time());
}
//计算多少天
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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。