Question

我有一个HTML文件，静态显示我学校的日程安排。如何根据时间获取表格行以更改背景颜色？我希望教室行仅在教室中具有不同的背景颜色，然后当第一个时段的行具有不同的背景颜色时返回到正常。等等一整天。

<!DOCTYPE html>
<html>
<head>
<title>Schedule 1</title>
<style>
body {
    background-color: black;
    color:white;
    text-align: center;
}
table, th, td {
    color: black;
    background-color: white;
    text-align: center;
    border: 2px solid black;
    border-collapse: collapse;
    font-size: 25px;
    margin: auto;
    padding: 5px;
}
th {
    width: 300px;
    height: 40px;
}
td:nth-child(1) {
    width: 80px;
}
td:nth-child(2) {
    width: 160px;
}
.table {
    height: 500px;
}
</style>
</head>
<br><br>
<h1 style="color:white; bgcolor:black">SCHEDULE 1</h1>
<div class="table">
<table class="schedule">
 <tr>  <th width="300" colspan="2">REGULAR</th> </tr>
 <tr>  <td>HR</td><td>8:04 - 8:17</td> </tr>
 <tr>  <td>1</td><td>8:21 - 9:06</td> </tr>
 <tr>  <td>2</td><td>9:10 - 9:55</td> </tr>
 <tr>  <td>3</td><td>9:59 - 10:44</td> </tr>
 <tr>  <td>4</td><td>10:48 - 11:33</td> </tr>
 <tr>  <td>5</td><td>11:37 - 12:22</td> </tr>
 <tr>  <td>6</td><td>12:26 - 1:11</td> </tr>
 <tr>  <td>7</td><td>1:15 - 2:01</td> </tr>
 <tr>  <td>8</td><td>2:05 - 2:50</td> </tr>
</table>
</div>
</body>
</html>

Answer 1

你可以做类似的事情，这使用jQuery。在您的javascript中，查看是白天还是晚上（如果需要，可以查看更多次），然后根据结果更新您的dom样式。（这是24小时格式，您可以将其更改为12小时格式，以使if/else语句更容易：((hourCompare + 11) % 12 + 1)

var d = new Date();
var hourCompare = d.getHours();
if (hourCompare >= 8 && hourCompare <= 22) {
    //day time
    $('.tableCell').css("background-color", "yellow");
} else {
    //night time
    $('.tableCell').css("background-color", "blue");
}

我为你准备了一个jsfiddle。为了获得正确的颜色，你基本上必须为你想要找到的每个小时写一个if语句，并像我在小提琴中那样更新颜色。我用setInterval编写它来检查每3秒的时间更新。 https://jsfiddle.net/zu588wjr/1/

根据时间0f更改哪一个表行背景颜色在一天中变化

1 个答案: