javascript - 根据一天中的时间更改哪个表行背景颜色

标签 javascript css html-table

我尝试不仅将此代码调整数小时,而且调整数分钟。但我在某个地方错了。你能告诉我在哪里吗?

checkUpdateColors = function() {
 var d = new Date();
 var hourCompare = d.getHours();
 var minsCompare = d.getMinutes();

if ((hourCompare = 7 && minsCompare >= 30) | (hourCompare = 8 minsCompare < 10)) {
    $('#r1').css("background-color", "ceeca5");
if (hourCompare = 11 && minsCompare >= 0 && minsCompare < 40) {
    $('#r9').css("background-color", "blue"); 

} else {
    $('#r1').css("background-color", "blue");
    $('#r2').css("background-color", "red");
}
}();

setInterval(function() {
   checkUpdateColors();  
}, 3000);

这是完整的代码:

<style>
table, th, td {
    color: black;
    background-color: white;
    text-align: center;
    border: 2px solid black;
    border-collapse: collapse;
    font-size: 16px;
    margin: auto;
    padding: 5px;
}
td:nth-child(1) {
    width: 20px;
}
td:nth-child(2) {
    width: 160px;
}
</style>

<script type="text/javascript">
checkUpdateColors = function() {
 var d = new Date();
 var hourCompare = d.getHours();
 var minsCompare = d.getMinutes();

if ((hourCompare = 7 && minsCompare >= 30) | (hourCompare = 8 minsCompare < 10)) {
    $('#r1').css("background-color", "ceeca5");
if (hourCompare = 11 && minsCompare >= 0 && minsCompare < 40) {
    $('#r9').css("background-color", "blue"); 

} else {
    $('#r1').css("background-color", "blue");
    $('#r2').css("background-color", "red");
}
}();

setInterval(function() {
   checkUpdateColors();  
}, 3000);
</script>

<div class="table">
<table class="schedule">
 <tr>  <th width="200" colspan="2">I СМЯНА</th> </tr>
 <tr>  <td id="r1">1</td><td>7:30 - 8:10</td> </tr>
 <tr>  <td id="r2" colspan="2">Междучасие</td> </tr>
 <tr>  <td id="r3">2</td><td>8:20 - 9:00</td> </tr>
 <tr>  <td id="r4" colspan="2">Междучасие</td> </tr>
 <tr>  <td id="r5">3</td><td>9:20 - 10:00</td> </tr>
 <tr>  <td id="r6" colspan="2">Междучасие</td> </tr>
 <tr>  <td id="r7">4</td><td>10:10 - 10:50</td> </tr>
 <tr>  <td id="r8" colspan="2">Междучасие</td> </tr>
 <tr>  <td id="r9">5</td><td>11:00 - 11:40</td> </tr>
 <tr>  <td id="r10" colspan="2">Междучасие</td> </tr>
 <tr>  <td id="r11">6</td><td>11:50 - 12:30</td> </tr>
 <tr>  <td id="r12" colspan="2">Междучасие</td> </tr>
 <tr>  <td id="r13">7</td><td>12:40 - 13:20</td> </tr>
 <tr>  <td id="r14" colspan="2">Междучасие</td> </tr>
 <tr>  <td id="r15">8</td><td>1:15 - 2:01</td> </tr>
</table>
</div>

我上传了代码:http://jsfiddle.net/6h7u434j/ .

最佳答案

试试这个 java 脚本代码:

<script type="text/javascript">
    function checkUpdateColors() {
         var d = new Date();
         var hourCompare = d.getHours();
         var minsCompare = d.getMinutes();

        if ((hourCompare == 7 && minsCompare >= 30) || (hourCompare == 8 && minsCompare < 10)) {
            $('#r1').css("background-color", "ceeca5");

            if (hourCompare = 11 && minsCompare >= 0 && minsCompare < 40) {
                $('#r9').css("background-color", "blue"); 

            } 
            else {
                $('#r1').css("background-color", "blue");
                $('#r2').css("background-color", "red");
            }
        }
    }

    setInterval(function() { checkUpdateColors(); }, 3000);
    </script>

关于javascript - 根据一天中的时间更改哪个表行背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44105839/

相关文章:

html - 如何正确地将表格置于其 div 容器中?

javascript - 我要查询whitepages.com 4000次,如何保存结果?

asp.net - 我无法使我的 gridview 的标题可以点击进行排序

javascript - 如何使用 $(element).css(styles) 将多种样式应用于 div?

没有脚本的 jQuery 导航菜单切换

html - 如何使用 Selenium Webdriver 选择嵌套的 css 元素?

html - 图像被部分剪裁

html - 在 HTML/CSS 中如何垂直拆分表格单元格(特殊版本)

javascript - 使用 Strope js 连接到 Prosody XMPP 服务器 (CONNFAIL)

javascript - 发布更改时防止 Meteor 删除已发送到客户端的 MiniMongo 数据