Change Which Table Row Background Color Based on Time of Day

Question

I try to adjust this code not only for hours but for minutes. But I'm wrong somewhere. Can you tell me where, please?

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);

This is the whole code:

<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>

I uploaded the code: http://jsfiddle.net/6h7u434j/ .

Answer 1

try this java script code :

<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>