表格的背景色跟随时间变化

需求：
1、来信时间正常显示
2、回复时间如果没有填写默认是来信时间+7天
3、分流时间如果没有填写默认是回复时间+2天
4、联系时间如果没有填写默认是分流时间+7天
以上四个时间全是，距离当前时间为1-2天时绿色，3-7天时橙色，7天时红色，7天以上闪红
5、答复时间，如果用户不填的情况下是默认回复时间加3个月
6、当下一个时间的颜色没有填写，默认填写完成以后，上一个的背景色颜色变成白色
以下为html代码

<table id="table" border="2" style="width:556px; height:100px;">
            <caption>table</caption>
            <tr><td>序号</td><td>收信时间</td><td>回复时间</td><td>分流时间</td><td>办结时间</td><td>答复时间</td></tr> 
            <tr class="bg"><td>1</td><td>2019-07-08</td><td></td><td>2019-07-16</td><td>2019-07-16</td><td>2019-07-16</td></tr>
            <tr class="bg"><td>2</td><td>2019-06-08</td><td>2019-06-15</td><td></td><td>2019-07-01</td><td>2019-07-02</td></tr>
            <tr class="bg"><td>3</td><td>2019-07-15</td><td>2019-07-09</td><td>2019-07-08</td><td></td><td>2019-07-05</td></tr>
            <tr class="bg"><td>4</td><td>2019-07-01</td><td>2019-07-12</td><td>2019-07-13</td><td>2019-07-04</td><td></td></tr>
              
        </table>

以下为js代码

<script type="text/javascript" src="js/jquery.min.js" ></script>
    <script type="text/javascript">
var Receivingtime=[];//收信时间      
var Responsetime=[];//回复时间
var Shunttime = [];//分流时间
var Settlementtime = [];//办结时间
var Replytime = [];//答复时间


//以下为转化时间格式的代码
function formatTime(date) {
  var year = date.getFullYear();
  var month = date.getMonth()+1, month = month < 10 ? '0' + month : month;
  var day = date.getDate(), day =day < 10 ? '0' + day : day;
  return year + '-' + month + '-' + day;
}//"2017-07-05"

//以下为对比时间天数的代码
function getOffsetDays(time1, time2) {
    var offsetTime = Math.abs(time1 - time2);
    return Math.floor(offsetTime / (3600 * 24 * 1e3));
}
    
var table = document.getElementById("table"); //获得整个表格对象
//收信时间
for (var i = 1; i < table.rows.length; i++) {
  console.log(table.rows[i].cells[1].innerText);
  Receivingtime.push(table.rows[i].cells[1].innerText);
}
var currentTime = Date.now();
console.log(currentTime)

for(var i = 0; i < Receivingtime.length; i++){
    //以下为改变颜色的操作
    var daycha = getOffsetDays((new Date(Receivingtime[i])).getTime(),currentTime );
    if(daycha<=2&&daycha>1){
        table.rows[i+1].cells[1].style.backgroundColor = '#008800';
    }
    if(daycha>2&&daycha<7){
        table.rows[i+1].cells[1].style.backgroundColor = '#ffa500';
    }
    if(daycha==7){
        table.rows[i+1].cells[1].style.backgroundColor = '#ff0000';
    }
    if(daycha>7){
        table.rows[i+1].cells[1].style.backgroundColor = '#fc1919';
    }
}
//回复时间
for (var i = 1; i < table.rows.length; i++) {
  console.log(table.rows[i].cells[2].innerText);
  Responsetime.push(table.rows[i].cells[2].innerText);
  if(table.rows[i].cells[2].innerText==''){
    console.log(i)
    var newday = new Date(Receivingtime[i-1])
    console.log(newday)
    newday.setDate(newday.getDate()+7)//Wed Jul 05 2017 13:50:11 GMT+0800 (中国标准时间)
    Responsetime[i-1] = formatTime(newday)
    table.rows[i].cells[2].innerHTML = formatTime(newday);
    table.rows[i].cells[1].style.backgroundColor = '#fff';
    
  }
  
}
console.log(Responsetime)
console.log(Responsetime.length)
for(var i = 0; i < Responsetime.length; i++){
    //以下为改变颜色的操作
    var daycha = getOffsetDays((new Date(Responsetime[i])).getTime(),currentTime );
    if(daycha<=2&&daycha>1){
        table.rows[i+1].cells[2].style.backgroundColor = '#008800';
    }
    if(daycha>2&&daycha<7){
        table.rows[i+1].cells[2].style.backgroundColor = '#ffa500';
    }
    if(daycha==7){
        table.rows[i+1].cells[2].style.backgroundColor = '#ff0000';
    }
    if(daycha>7){
        table.rows[i+1].cells[2].style.backgroundColor = '#fc1919';
    }
}

//分流时间   Shunttime
for (var i = 1; i < table.rows.length; i++) {
  console.log(table.rows[i].cells[3].innerText);
  Shunttime.push(table.rows[i].cells[3].innerText);
  if(table.rows[i].cells[3].innerText==''){
    console.log(i)
    var newday = new Date(Responsetime[i-1])
    console.log(newday)
    newday.setDate(newday.getDate()+2)//Wed Jul 05 2017 13:50:11 GMT+0800 (中国标准时间)
    Shunttime[i-1] = formatTime(newday)
    table.rows[i].cells[3].innerHTML = formatTime(newday);
    table.rows[i].cells[2].style.backgroundColor = '#fff';
  }
  
}
console.log(Shunttime)

for(var i = 0; i < Shunttime.length; i++){
    //以下为改变颜色的操作
    var daycha = getOffsetDays((new Date(Shunttime[i])).getTime(),currentTime );
    if(daycha<=2&&daycha>1){
        table.rows[i+1].cells[3].style.backgroundColor = '#008800';
    }
    if(daycha>2&&daycha<7){
        table.rows[i+1].cells[3].style.backgroundColor = '#ffa500';
    }
    if(daycha==7){
        table.rows[i+1].cells[3].style.backgroundColor = '#ff0000';
    }
    if(daycha>7){
        table.rows[i+1].cells[3].style.backgroundColor = '#fc1919';
    }
}

 
//办结时间   Settlementtime
for (var i = 1; i < table.rows.length; i++) {
  console.log(table.rows[i].cells[4].innerText);
  Settlementtime.push(table.rows[i].cells[4].innerText);
   if(table.rows[i].cells[4].innerText==''){
    console.log(i)
    var newday = new Date(Shunttime[i-1])
    console.log(newday)
    newday.setDate(newday.getDate()+7)//Wed Jul 05 2017 13:50:11 GMT+0800 (中国标准时间)
    Settlementtime[i-1] = formatTime(newday)
    table.rows[i].cells[4].innerHTML = formatTime(newday);
    table.rows[i].cells[3].style.backgroundColor = '#fff';
  }
  
  
}
console.log(Settlementtime)

for(var i = 0; i < Settlementtime.length; i++){
    //以下为改变颜色的操作
    var daycha = getOffsetDays((new Date(Settlementtime[i])).getTime(),currentTime );
    if(daycha<=2&&daycha>1){
        table.rows[i+1].cells[4].style.backgroundColor = '#008800';
    }
    if(daycha>2&&daycha<7){
        table.rows[i+1].cells[4].style.backgroundColor = '#ffa500';
    }
    if(daycha==7){
        table.rows[i+1].cells[4].style.backgroundColor = '#ff0000';
    }
    if(daycha>7){
        table.rows[i+1].cells[4].style.backgroundColor = '#fc1919';
    }
}

//答复时间   
for (var i = 1; i < table.rows.length; i++) {
  console.log(table.rows[i].cells[5].innerText);
  Replytime.push(table.rows[i].cells[5].innerText);
  if(table.rows[i].cells[5].innerText==''){
    console.log(i)
    var newday = new Date(Responsetime[i-1])
    console.log(newday)
    newday.setDate(newday.getDate()+90)//Wed Jul 05 2017 13:50:11 GMT+0800 (中国标准时间)
    Replytime[i-1] = formatTime(newday);
    table.rows[i].cells[5].innerHTML = formatTime(newday);
    table.rows[i].cells[2].style.backgroundColor = '#fff';
  }
  
}
console.log(Replytime)

for(var i = 0; i < Replytime.length; i++){
    //以下为改变颜色的操作
    var daycha = getOffsetDays((new Date(Replytime[i])).getTime(),currentTime );
    if(daycha<=30&&daycha>1){
        table.rows[i+1].cells[5].style.backgroundColor = '#008800';
    }
    if(daycha>30&&daycha<=60){
        table.rows[i+1].cells[5].style.backgroundColor = '#ffa500';
    }
    if(daycha>75&&daycha<=90){
        table.rows[i+1].cells[5].style.backgroundColor = '#ff0000';
    }
    if(daycha>90){
        table.rows[i+1].cells[5].style.backgroundColor = '#fc1919';
    }
}
    </script>

表格的背景色跟随时间变化

推荐阅读更多精彩内容