[英]Change Which Table Row Background Color Changes Thoughout the Day Based on Time 0f Day
[英]Change Which Table Row Background Color Based on Time of Day
我不僅嘗試調整此代碼,還嘗試調整幾分鍾。 但是我在某個地方錯了。 你能告訴我在哪里嗎?
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.