<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
</head>
<style>
.body-left {width: 320px;float: left;}
.list-data div{ float: left;width: 80px;text-align: center;font-size: 13px;}
.list-data{ clear: both;}
.y,.m,.d{ width: 1620px; clear: both;}
.y .ylist:nth-child(2n-1){ background: #efefef;}
.y .ylist{ background: #f7f7f7;}
/* .tm:nth-child(2n-1){ background: #f7f7f7;} */
.tda span{ position: relative;}
.tda span:before {background: #00C7AF;content: "";margin: 5%;left: 0;top: 0;width: 90%;z-index: -1;height: 96%;border-radius: 5px;position: absolute;}
.tm:before { position: absolute; left: 0; top: 0; /* right: -14px; */ width: 100%; height: 100%; border-left: 1px solid #ccc; content: ""; }.tm { width: 45px; float: left; text-align: center; position: relative; }
.tm > div{ font-size: 13px;}
.d > div{ background: #00C7AF; border-radius:3px;}
</style>
<body>
<div>
<div class="body-left">
<div class="list-data"><div>項目階段</div><div>開始時間</div><div>結束時間</div><div>完成率</div></div>
</div>
<div style="width: 2020px;float: left;">
<div class="y"></div>
<div class="m"></div>
<div class="d" ></div>
</div>
</div>
</body>
<script>
var source = [{
name: "<div>項目立項" +"</div><div>2020-09-29</div><div>" +"2020-10-29</div><div>" + "100%</div>" ,
from: "1320192000000",
to: "1322401600000",
},{
name: "<div>需求提報 " +"</div><div>2020-09-29</div><div>" +"2020-10-29</div><div>" + "100%</div>" ,
from: "1342192000000",
to: "1360192000000",
},{
name: "<div>合同生效" +"</div><div>2020-09-29</div><div>" +"2020-10-29</div><div>" + "100%</div>" ,
from: "1342421600000",
to: "1362401600000",
}]
console.log(source.length)
var yArrS=[];
var yArrE=[];
var mArrS=[];
var mArrE=[];
var dArrS=[];
var dArrE=[];
for(var i=0;i<source.length;i++){
console.log(source[i].from)
$(".body-left").append("<div class='list-data'>"+ source[i].name +"</div>")
var now = new Date(parseInt(source[i].from));
var end = new Date(parseInt(source[i].to));
var yearS = now.getFullYear();
var yearE = end.getFullYear();
var monthS = now.getMonth()+1;
var monthE = end.getMonth()+1;
var dateS = now.getDate();
var dateE = end.getDate();
yArrS.push(yearS)
yArrE.push(yearE)
mArrS.push(monthS)
mArrE.push(monthE)
dArrS.push(dateS)
dArrE.push(dateE)
}
console.log(yArrS)
console.log(yArrE)
console.log(mArrS)
console.log(mArrE)
// console.log(dArrS)
// console.log(dArrE)
var tabArrYear = [];
var yearR = yArrE[yArrE.length-1]-yArrS[0]
for(var i=0;i<=yearR;i++){
$(".y").append("<div class='ylist'>"+parseInt( yArrS[0]+i) +"</div>")
tabArrYear.push(yArrS[i])
}
var mSum = tabArrYear.length*12
var mSunArr = []
for(var i=0;i<mSum;i++){
mSunArr.push(parseInt((i%12)+1))
$(".m").append("<div class='tm'><div>"+ parseInt((i%12)+1) +"月</div><div class='tda'><span>10</span><span>20</span><span>30</span></div></div>")
}
// console.log(mSunArr)
// console.log(mSunArr.slice(mArrS[0]-1,mArrE[mArrE.length-1]-12))
// var mSunArrDom = mSunArr.slice(mArrS[0]-1,mArrE[mArrE.length-1]-12);
// // console.log(mSunArrDom)
// for(var i=0;i<mSunArrDom.length;i++){
// $(".m").append("<div class='tm'><div>"+ mSunArrDom[i] +"月</div><div class='tda'><span>10</span><span>20</span><span>30</span></div></div>")
// }
for(var i=0;i<yArrS.length;i++){
var yearReduce = yArrS[i]-yArrS[0];
var inYear = yArrE[i]-yArrS[i];
var setWidth = yArrE[i] - yArrS[i] == 0 ? (mArrE[i]-mArrS[i])+1 : (12-mArrS[i])+mArrE[i]+1;
var fM = mArrE[0]-mArrS[0]+1
if(i==0){
var dStr = "<div style='margin-top:3px;margin-left:"+parseInt((mArrS[i]-1)*45)+"px;width:"+ setWidth*45 +"px;height:20px;'></div>"
}else{
// console.log(yArrE[i] - yArrS[i] == 0 ? mArrS[i]-mArrE[i] : (12-mArrS[i])+mArrE[i])
var dStr = "<div style='margin-top:3px;margin-left:"+parseInt(yearReduce*12*45+(mArrS[i]-1)*45)+"px;width:"+ setWidth*45 +"px;height:20px;'></div>"
}
// if(inYear==0){
// var dStr = "<div style='margin-top:3px;margin-left:"+parseInt(((12-mArrS[i])-1)*45)+"px;width:"+ setWidth*45 +"px;height:20px;'></div>"
// }else if(inYear == 1){
// if(mArrE[i]-mArrS[i] > 0){
// var dStr = "<div style='margin-top:3px;margin-left:"+parseInt(((12-mArrS[i])-1)*45 + mArrS[i]*45)+"px;width:"+ setWidth*45 +"px;height:20px;'></div>"
// }
// }
$(".d").append(dStr)
}
var now = new Date(1326816000000);
var year = now.getFullYear();
var month = now.getMonth();
var date = now.getDate();
function getMonthWeek(a, b, c) {
var date = new Date(a, parseInt(b) - 1, c),
w = date.getDay(),
d = date.getDate();
if(w==0){
w=7;
}
var config={
getMonth:date.getMonth()+1,
getYear:date.getFullYear(),
getWeek:Math.ceil((d + 6 - w) / 7),
}
return config;
};
var getDate=getMonthWeek(year, month, date);
console.log("今天是 " + getDate.getYear + " 年的第 "+ getDate.getMonth + " 月的第 " + getDate.getWeek + " 周");
</script>
<style>
.y .ylist {
float: left;
width: 33.3333%;
text-align: center;
}
.tda { float: left;}
.tda span {
display: block;
float: left;
font-size: 10px;
height: 15px;
width: 15px;
line-height: 15px;
text-align: center;
}
.d{ height:180px;}
</style>
</html>
