HM_mysafe_table.js

// javascript
<script>
  function getinfo(lostime) {
    var t = lostime;
    if(t<=6){
      $("#c1").addClass("c1");
      $("#c2").removeClass("c2");
      $("#c3").removeClass("c3");
      $("#c4").removeClass("c4");
      $("#c5").removeClass("c5");
      $("#c6").removeClass("c6");
    }else if(t>6 &&  t<=10 ){
      $("#c2").addClass("c2");
      $("#c1").removeClass("c1");
      $("#c3").removeClass("c3");
      $("#c4").removeClass("c4");
      $("#c5").removeClass("c5");
      $("#c6").removeClass("c6");
    } else if(t>10 &&  t<=15 ){
      $("#c3").addClass("c3");
      $("#c1").removeClass("c1");
      $("#c2").removeClass("c2");
      $("#c4").removeClass("c4");
      $("#c5").removeClass("c5");
      $("#c6").removeClass("c6");
    } else if(t>15 &&  t<=20 ){
      $("#c4").addClass("c4");
      $("#c1").removeClass("c1");
      $("#c2").removeClass("c2");
      $("#c3").removeClass("c3");
      $("#c5").removeClass("c5");
      $("#c6").removeClass("c6");
    }else if(t>20 &&  t<=25 ){
      $("#c5").addClass("c5");
      $("#c1").removeClass("c1");
      $("#c2").removeClass("c2");
      $("#c3").removeClass("c3");
      $("#c4").removeClass("c4");
      $("#c6").removeClass("c6");
    }else if(t>25){
      $("#c6").addClass("c6");
      $("#c1").removeClass("c1");
      $("#c2").removeClass("c2");
      $("#c3").removeClass("c3");
      $("#c4").removeClass("c4");
      $("#c5").removeClass("c5");
    } else if (t>=30) {
    }
  }
</script>

// css
<style type="text/css">
  .c6{
    background-color:#ff0000;
  }
  .c5{
    background-color:#ffa500;
  }
  .c4{
    background-color:#ffa500;
  }
  .c3{
    background-color:#ffa500;
  }
  .c2{
    background-color:#ffa500;
  }
  .c1{
    background-color:#92d050;
  }
</style>

效果：当 losttime 在各个区间内，添加对应的 class 以展示当前状态。