如何使用 Javascript 相对于时间更改 HTML 中文本的颜色？答案

【问题标题】：How to change the color of a text in HTML using Javascript with respect to time?如何使用 Javascript 相对于时间更改 HTML 中文本的颜色？
【发布时间】：2021-03-04 00:44:03
【问题描述】：

我已经制定了时间表。我希望主题的颜色在主题的时间内根据时间自动改变。但是 Javascript 代码不起作用。请帮我修复代码。

JSFiddle 链接在这里：https://jsfiddle.net/Xampicus/t3j1xcyk/2/#&togetherjs=vghzPt6TKP

HTML 和 Javascript 的代码：

<html>
<head>
  <title>
    Exynos
  </title>
</head>
<body>
  <link rel="stylesheet" style="text/css" href="style.css">
  <h4>Time Table</h4>
  <div class="container">
    <ul class="time">
      <li>∀</li>
      <li>09:30-10:20</li>
      <li>10:30-11:20</li>
      <li>11:30-12:20</li>
      <li>13:10-14:00</li>
      <li>14:10-15:00</li>
      <li>15:10-16:00</li>
    </ul>
    <ul class="cyan">
      <li class="head" id="0">Monday</li>
      <li class="highlight" id="one">
        <a href="">English Lab</a>
      </li>
      <li class="highlight" id="one">
        <a>|</a>
      </li>
      <li id="two">
        <a href="">ESP - II</a>
      </li>
      <li id="three">
        <a href="">Computer</a>
      </li>
      <li id="four">
        <a href="">Maths - II</a>
      </li>
      <li id="five">
        <a href="">P. E.</a>
      </li>
    </ul>
    <ul class="red">
      <li class="head" id="1">Tuesday</li>
      <li class="highlight" id="one">
        <a href="">BEE Lab</a>
      </li>
      <li class="highlight" id="one">
        <a>|</a>
      </li>
      <li id="two">
        <a href="">Chemistry</a>
      </li>
      <li id="three">
        <a href="">SDP - II</a>
      </li>
      <li id="four">
        <a href="">Maths - II</a>
      </li>
      <li id="five">
        <a href="">BEE</a>
      </li>
    </ul>
    <ul class="green">
      <li class="head" id="2">Wednesday</li>
      <li li class="highlight" id="one">
        <a href="">Computer Lab</a>
      </li>
      <li class="highlight" id="one">
        <a>|</a>
      </li>
      <li id="two">
        <a href="">Entre. - I</a>
      </li>
      <li id="three">
        <a href="">English</a>
      </li>
      <li id="four">
        <a href="">ESP - II</a>
      </li>
      <li id="five">
        <a href="">Eng. Mech.</a>
      </li>
    </ul>
    <ul class="blue">
      <li class="head" id="3">Thursday</li>
      <li class="highlight" id="one">
        <a href="">Chemistry Lab</a>
      </li>
      <li class="highlight" id="one">
        <a>|</a>
      </li>
      <li id="two">
        <a href="">English</a>
      </li>
      <li id="three">
        <a href="">Foreign Lang.</a>
      </li>
      <li id="four">
        <a href="">Chemistry</a>
      </li>
      <li id="five">
        <a href="">Maths - II</a>
      </li>
    </ul>
    <ul class="yellow">
      <li class="head" id="4">Friday</li>
      <li class="highlight" id="one">
        <a href="">Eng. Graphics</a>
      </li>
      <li class="highlight" id="one">
        <a>|</a>
      </li>
      <li id="two">
        <a href="">SDP - II</a>
      </li>
      <li id="three">
        <a href="">Entre. - I</a>
      </li>
      <li id="four">
        <a href="">Chemistry</a>
      </li>
      <li id="five">
        <a href="">Eng. Mech.</a>
      </li>
    </ul>
  </div>
</body>
<script>
function autoColor() {
    var z;
    var d = new Date();
    var count = d.getDay();
    if ((d.getHours() == 9 && (d.getMinutes() <= 59 && d.getMinutes >= 30)) || (d.getHours() == 11 && (d.getMinutes() <= 30 && d.getMinutes >= 00)))
    {
      z = "one";
    }
    if ((d.getHours() == 11 && (d.getMinutes() <= 59 && d.getMinutes >= 30)) || (d.getHours() == 12 && (d.getMinutes() <= 30 && d.getMinutes >= 00)))
    {
      z = "two";
    }
    if ((d.getHours() == 13 && (d.getMinutes() <= 59 && d.getMinutes >= 10)) || (d.getHours() == 14 && (d.getMinutes() <= 10 && d.getMinutes >= 00)))
    {
      z = "three";
    }
    if ((d.getHours() == 14 && (d.getMinutes() <= 59 && d.getMinutes >= 10)) || (d.getHours() == 15 && (d.getMinutes() <= 10 && d.getMinutes >= 00)))
    {
      z = "four";
    }
    if ((d.getHours() == 15 && (d.getMinutes() <= 59 && d.getMinutes >= 10)) || (d.getHours() == 16 && (d.getMinutes() <= 10 && d.getMinutes >= 00)))
    {
      z = "five";
    }

    document.getElementById(count).getElementById(z).style.color.innerHTML = "black";
    setTimeout(autoColor,1000);

  }
  autoColor();
</script>
</html>

CSS 代码：

@font-face {
    font-family: 'Iosevka';
    src: url('Iosevka.ttf');
}

body {
    font-family: Iosevka;
    background-color: #0F0F12;
    color: #FFFFFF;
    font-size: 20px;
    text-align: center;
}

h4 {
    margin-top: 45px;
    font-size: 40px;
    text-align: center;
}

.container {
    display: inline-block;
    position: relative;
    text-align: center;
    width: 80%;
    background-color: #232328;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
}

ul {
    display: inline-block;
    justify-content: center;
    text-align: center;
    list-style-type: none;
    margin: 10;
    padding: 0;
}

li {
    min-width: 100px;
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 20px;
    font-size: 34px;
}

.flair {
  color: white;
}

ul li a {
    transition: color 0.4s ease;
}

a {
    color: white;
    text-decoration: none;
}

.highlight {
    background-color: #505050;
}

.head {
    font-weight: bold;
    color: #858585;
}

.time {
    color: #858585;
}

ul.green li a:hover {
    color: #4FAE0F;
    transition: color 0.5s ease;
}

ul.blue li a:hover {
    color: #0972D6;
    transition: color 0.5s ease;
}

ul.red li a:hover {
    color: #ed3434;
    transition: color 0.5s ease;
}

ul.yellow li a:hover {
    color: #edd934;
    transition: color 0.5s ease;
}

ul.cyan li a:hover {
    color: #00E6FF;
    transition: color 0.5s ease;
}

【问题讨论】：

什么是“不工作”？您预计会发生什么，实际会发生什么？
您的 html 无效，您有多个具有相同 id 的元素...
document.getElementById(count).getElementById(z).style.color.innerHTML = "black"; 不会选择所需的 li 元素。此外，您必须将color 应用于a 元素。

标签： javascript html css dom

【解决方案1】：

document.getElementById(count) 将返回，说 <li class="head" id="2">Wednesday</li>。

既然你想选择兄弟元素，说<li id="three"><a href="">English</a></li>你可以使用：

document.getElementById(count).parentElement.querySelector(`#${z}`)

它将选择<li class="head" id="2">Wednesday</li>的父元素，然后在其后代中搜索id为z的元素。

但是，您需要将颜色赋予其中的a 标签。所以，代码最终变成：

document.getElementById(count).parentElement.querySelector(`#${z} a`).style.color = "black";

（注意没有 innerHTML，看看这个：innerHTML）

最终的 Javascript 部分变为：

function autoColor() {
    var z;
    var d = new Date(2021, 02, 03, 11, 31, 11) // new Date();
    var count = d.getDay();
    if ((d.getHours() == 9 && (d.getMinutes() <= 59 && d.getMinutes() >= 30)) || (d.getHours() == 11 && (d.getMinutes() <= 30 && d.getMinutes() >= 00)))
    {
      z = "one";
    }
    if ((d.getHours() == 11 && (d.getMinutes() <= 59 && d.getMinutes() >= 30)) || (d.getHours() == 12 && (d.getMinutes() <= 30 && d.getMinutes() >= 00)))
    {
      z = "two";
    }
    if ((d.getHours() == 13 && (d.getMinutes() <= 59 && d.getMinutes() >= 10)) || (d.getHours() == 14 && (d.getMinutes() <= 10 && d.getMinutes() >= 00)))
    {
      z = "three";
    }
    if ((d.getHours() == 14 && (d.getMinutes() <= 59 && d.getMinutes() >= 10)) || (d.getHours() == 15 && (d.getMinutes() <= 10 && d.getMinutes() >= 00)))
    {
      z = "four";
    }
    if ((d.getHours() == 15 && (d.getMinutes() <= 59 && d.getMinutes() >= 10)) || (d.getHours() == 16 && (d.getMinutes() <= 10 && d.getMinutes() >= 00)))
    {
      z = "five";
    }
  document.getElementById(count).parentElement.querySelector(`#${z} a`).style.color = "black";
    setTimeout(autoColor,1000);

  }
  autoColor();

请注意，我使用 var d = new Date(2021, 02, 03, 11, 31, 11); 只是为了检查它是否正常工作，请将其替换为 new Date()。另外，我添加了一些缺少的括号。

【讨论】：