javascript - 根据一天中的时间(间隔 45 分钟)突出显示表行

Question

这是我的 table 。我想以 45 分钟的间隔逐个突出显示表的行，具体取决于现在的时间，并且应该在用户访问页面时动态更新。

我不知道，因为我不熟悉 jquery 或 javascript。任何帮助将不胜感激。

<div class="table">
     <table>

 <tr>  <td id="r1">1</td><td>10:15 - 11:00</td> </tr>

 <tr>  <td id="r3">2</td><td>11:00 - 11:45</td> </tr>

 <tr>  <td id="r5">3</td><td>11:45 - 12:30</td> </tr>

 <tr>  <td id="r7">4</td><td>12:30 - 1:15</td> </tr>

 <tr>  <td id="r9">5</td><td>1:15 - 2:00</td> </tr>

 <tr>  <td id="r11">6</td><td>2:00 - 2:45</td> </tr>

 <tr>  <td id="r13">7</td><td>2:45 - 3:30</td> </tr>
</table>

Answer 1

可以用一组对象来完成，但我很懒，所以我创建了一组时间和一个类名。或者，根据返回的时间设置 ids(例如“id_1100”)。我刚刚使它与给定的示例一起工作。

还可以删除 now 变量，因为它只使用一次，但这会使其更加难以阅读。

哦，如果您在上午 10:15 之前或下午 3:30 之后查看，此演示将无法工作，并且当用户在页面上时我不会动态更新，但您可以设置自己的计时器并清除/设置正确行的背景。

编辑:可能适用于 Opera Mini

var now = new Date().getHours() * 100 + new Date().getMinutes();
var times = [1015, 1100, 1145, 1230, 1315, 1400, 1445, 1530];
var ids = ['r1', 'r3', 'r5', 'r7', 'r9', 'r11', 'r13'];
var selected = '';
for (var ix = 0; ix < times.length; ix++) {
  if (now >= times[ix]) {
    selected = ids[ix];
  }
}
if (selected) document.getElementById(selected).parentElement.style.backgroundColor = 'yellow';

<table>

  <tr>
    <td id="r1">1</td>
    <td>10:15 - 11:00</td>
  </tr>

  <tr>
    <td id="r3">2</td>
    <td>11:00 - 11:45</td>
  </tr>

  <tr>
    <td id="r5">3</td>
    <td>11:45 - 12:30</td>
  </tr>

  <tr>
    <td id="r7">4</td>
    <td>12:30 - 1:15</td>
  </tr>

  <tr>
    <td id="r9">5</td>
    <td>1:15 - 2:00</td>
  </tr>

  <tr>
    <td id="r11">6</td>
    <td>2:00 - 2:45</td>
  </tr>

  <tr>
    <td id="r13">7</td>
    <td>2:45 - 3:30</td>
  </tr>
</table>