时间戳

首页 > 解决方案 > 任何人都可以帮我使用 JQuery 对我的时间块进行颜色编码吗？

javascript - 任何人都可以帮我使用 JQuery 对我的时间块进行颜色编码吗？

问题描述

一段时间以来，我一直在尝试对我的计划器上的时间块列进行颜色编码，但似乎无法弄清楚。我希望它被彩色编码，以便过去的时间显示为红色，当前的时间显示为绿色，未来的时间显示为蓝色。当我检查它时，它说“日期未定义”。目前在网页上，所有时间都显示为白色。

这是我的 HTML（共有 8 行，上午 9 点到下午 5 点）

 <div class = "container" spellcheck="false">
    <div class = "row my-row">
        <div class = "col my-col col-a1 colorcode" id = "9"> 9am </div>
        <div class = "col my-col col-a2 edit_cont" > </div>
        <div class = "col my-col col-a3 edit_btn"> edit </div>
    </div>
    <div class = "row my-row" >
        <div class = "col my-col col-b1 colorcode" id = "10"> 10am </div>
        <div class = "col my-col col-b2 edit_cont">  </div>
        <div class = "col my-col col-b3 edit_btn"> edit </div>
    </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js" type="text/javascript"></script>

这是我的 Javascript/Jquery：

});

    const colorcode = document.getElementsByClassName("colorcode");


    var currentHour = date.getHours();
    $('.colorcode').each(function(){
        var val = parseInt($(this).prop('id'));
        if(val > currentHour && val < currentHour+6){
            $(this).css('background-color','Blue');
        }else if(val < currentHour && val > currentHour-6){
            $(this).css('background-color','Red');
        }else if(val === currentHour){
            $(this).css('background-color','Green');
        }else{
            $(this).css('background-color','White');
        }
    });

标签： javascriptjquery

解决方案

您的代码的主要问题date是未定义。

您可以将那段代码替换为var currentHour = (new Date()).getHours();. 请参阅下面的片段

var currentHour = (new Date()).getHours();
$('.colorcode')
  .each(function(){
    var val = parseInt($(this).prop('id'));
    if(val > currentHour && val < currentHour + 6){
      $(this).css('background-color','Blue');
    }else if(val < currentHour && val > currentHour-6){
      $(this).css('background-color','Red');
    }else if(val === currentHour){
      $(this).css('background-color','Green');
    }else{
      $(this).css('background-color','White');
    }
  });
.container {
  display:table;
}

.container .row {
  display:table-row;
}

.container .row .col {
  display:table-cell;
  padding:5px;
  border:1px solid #333;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" spellcheck="false">
    <div class="row my-row">
        <div class="col my-col col-a1 colorcode" id="8"> 8am </div>
        <div class="col my-col col-a2 edit_cont" > </div>
        <div class="col my-col col-a3 edit_btn"> edit </div>
    </div>
    <div class="row my-row">
        <div class="col my-col col-a1 colorcode" id="9"> 9am </div>
        <div class="col my-col col-a2 edit_cont" > </div>
        <div class="col my-col col-a3 edit_btn"> edit </div>
    </div>
    <div class="row my-row" >
        <div class="col my-col col-b1 colorcode" id="10"> 10am </div>
        <div class="col my-col col-b2 edit_cont">  </div>
        <div class="col my-col col-b3 edit_btn"> edit </div>
    </div>
    <div class="row my-row" >
        <div class="col my-col col-b1 colorcode" id="11"> 11am </div>
        <div class="col my-col col-b2 edit_cont">  </div>
        <div class="col my-col col-b3 edit_btn"> edit </div>
    </div>
    <div class="row my-row" >
        <div class="col my-col col-b1 colorcode" id="12"> 12pm </div>
        <div class="col my-col col-b2 edit_cont">  </div>
        <div class="col my-col col-b3 edit_btn"> edit </div>
    </div>
    <div class="row my-row" >
        <div class="col my-col col-b1 colorcode" id="13"> 1pm </div>
        <div class="col my-col col-b2 edit_cont">  </div>
        <div class="col my-col col-b3 edit_btn"> edit </div>
    </div>
    <div class="row my-row">
        <div class="col my-col col-a1 colorcode" id="14"> 2pm </div>
        <div class="col my-col col-a2 edit_cont" > </div>
        <div class="col my-col col-a3 edit_btn"> edit </div>
    </div>
</div>

推荐阅读