个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 19:02:23 24 4
gpt4 key购买 nike

我正在努力使唯一的粉红色单元格与当前日期和时间相匹配。但是，现在我有了它，所以整行时间都突出显示为粉红色。我还按半小时对它进行了排序，因此如果是下午 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/

24 4 0
文章推荐： c# - 如何更新sql server表中的选择性行？
文章推荐： c - 即使我释放了所有分配，总是内存泄漏
文章推荐： 无法获取段错误的原因
文章推荐： c# - 我如何表达一个参数需要在 C# 中实现多个接口(interface)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com