javascript - 制作与当前日期和时间相匹配的单元格，某种颜色

标签 javascript

我正在努力使唯一的粉红色单元格与当前日期和时间相匹配。但是，现在我有了它，所以整行时间都突出显示为粉红色。我还按半小时对它进行了排序，因此如果是下午 3:11，则下午 3:00 的行将突出显示。我想要它的示例:如果时间是 2:30 并且是星期一，我希望与星期一和 2:30 匹配的单元格为粉红色。 

let today = new Date();
var d = today.getDay();
var weeks = document.getElementsByTagName("tr");
for (var i = 0; i < weeks.length; i++) {
  var currentWeek = weeks[i].children;
  if (d < currentWeek.length) {
    currentWeek[d + 1].style.backgroundColor = "lightblue";
  }
}
var n = today.getHours();
var x = today.getMinutes();
if (x <= 29) {
  x = "00";
}
if (x >= 30) {
  x = "30";
}
if (n >= 12) {
  z = "PM";
} else {
  z = "AM";
}
var todayyy = n + ":" + x + z;
var datte = document.getElementById(todayyy).parentNode.children;
for (var i = 0; i < datte.length; i++) {
  datte[i].style.backgroundColor = "pink";
}
<!DOCTYPE html>
<html lang="en-US">

<head>
  <title>Calendar</title>
  <meta charset="utf-8">

  <style>

  </style>
</head>

<body>

  <table class="tg">
    <tr>
      <th class="time">time</th>
      <th class="day" id="sunday">sun</th>
      <th class="day" id="monday">mon</th>
      <th class="day" id="tuesday">tue</th>
      <th class="day" id="wensday">wed</th>
      <th class="day" id="thursday">thu</th>
      <th class="day" id="friday">fri</th>
      <th class="day" id="saturday">sat</th>
    </tr>
    <tr>
      <td class="date" id="8:00AM">8:00 AM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="8:30AM">8:30 AM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="9:00AM">9:00 AM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="9:30AM">9:30 AM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="10:00AM">10:00 AM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="10:30AM">10:30 AM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="11:00AM">11:00 AM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="11:30AM">11:30 AM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="12:00PM">12:00 PM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="12:30PM">12:30 PM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="13:00PM">1:00 PM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="13:30PM">1:30 PM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="14:00PM">2:00 PM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="14:30PM">2:30 PM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="15:00PM">3:00 PM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="15:30PM">3:30 PM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="16:00PM">4:00 PM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="16:30PM">4:30 PM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="17:00PM">5:00 PM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="17:30PM">5:30 PM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="18:00PM">6:00 PM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="18:30PM">6:30 PM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="19:00PM">7:00 PM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="19:30PM">7:30 PM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="20:00PM">8:00 PM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
  </table>
  <script>
  </script>


</body>

</html>

最佳答案

在一周中的几天循环中，设置一个 col 变量，然后将它传递给您的 datte 数组:

datte[col].style.backgroundColor = "pink";


let today = new Date();
var d = today.getDay();
var weeks = document.getElementsByTagName("tr");

let col;

for (var i = 0; i < weeks.length; i++) {
  var currentWeek = weeks[i].children;
  if (d < currentWeek.length) {
    currentWeek[d + 1].style.backgroundColor = "lightblue"
    col = d + 1
  }
}
var n = today.getHours();
var x = today.getMinutes();
if (x <= 29) {
  x = "00";
}
if (x >= 30) {
  x = "30";
}
if (n >= 12) {
  z = "PM";
} else {
  z = "AM";
}
var todayyy = n + ":" + x + z;
var datte = document.getElementById(todayyy).parentNode.children;
datte[col].style.backgroundColor = "pink";
<!DOCTYPE html>
<html lang="en-US">

<head>
  <title>Calendar</title>
  <meta charset="utf-8">

  <style>

  </style>
</head>

<body>

  <table class="tg">
    <tr>
      <th class="time">time</th>
      <th class="day" id="sunday">sun</th>
      <th class="day" id="monday">mon</th>
      <th class="day" id="tuesday">tue</th>
      <th class="day" id="wensday">wed</th>
      <th class="day" id="thursday">thu</th>
      <th class="day" id="friday">fri</th>
      <th class="day" id="saturday">sat</th>
    </tr>
    <tr>
      <td class="date" id="8:00AM">8:00 AM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="8:30AM">8:30 AM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="9:00AM">9:00 AM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="9:30AM">9:30 AM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="10:00AM">10:00 AM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="10:30AM">10:30 AM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="11:00AM">11:00 AM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="11:30AM">11:30 AM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="12:00PM">12:00 PM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="12:30PM">12:30 PM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="13:00PM">1:00 PM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="13:30PM">1:30 PM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="14:00PM">2:00 PM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="14:30PM">2:30 PM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="15:00PM">3:00 PM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="15:30PM">3:30 PM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="16:00PM">4:00 PM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="16:30PM">4:30 PM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="17:00PM">5:00 PM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="17:30PM">5:30 PM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="18:00PM">6:00 PM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="18:30PM">6:30 PM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="19:00PM">7:00 PM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="19:30PM">7:30 PM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    <tr>
      <td class="date" id="20:00PM">8:00 PM</td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
  </table>
  <script>
  </script>


</body>

</html>

关于javascript - 制作与当前日期和时间相匹配的单元格，某种颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59381429/

上一篇：javascript - 如何在 ReactJS 中使用 lis 创建播放列表

下一篇：javascript - 在 React 中映射元素时，如何根据特定索引处的字段有条件地渲染节点？

相关文章：

javascript - D3 map 无法区分点击和选择文本

javascript - AngularJS JSON 编辑器切换可编辑

javascript - Array.apply(null, Array(x) ) 和 Array(x) 之间的区别

javascript - 如何通过 javascript 将较小的框插入表单框？

javascript - 使用变量来定义 javascript/jquery 中的位置

javascript - cordova 如何告诉浏览器 FileTransfer CORS 许可

javascript - 如何将 Material Design Lite 与 webpack 结合使用？

javascript - 正则表达式匹配多个带或不带空格的单词

javascript - 优化用 TypeScript 编写的文件内容解析器类

javascript - 如何在 javascript 中使用字符串参数输入作为变量名？

©2024 IT工具网  联系我们