堆栈内存溢出
  繁体   English   中英

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

[英]How to change the color of a text in HTML using Javascript with respect to time?

 原文  2021-03-03 14:47:56  3   1    javascript/ html/ css/ dom

问题描述

我已经制定了时间表。 我希望主题的颜色在主题的时间内根据时间自动改变。 但是 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;
}

1 个解决方案

解决方案1
 0  2021-03-03 16:44:03

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

由于您希望 select 兄弟元素，说<li id="three"><a href="">English</a></li>你可以使用：

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

这将 select 的父元素<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() 。 另外，我添加了一些缺少的括号。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用javascript更改html中文本的颜色 使用JavaScript更改HTML中的文本背景颜色 如何使用javascript for循环更改文本颜色？ 如何使用JavaScript更改文本颜色 如何使用jQuery或JavaScript更改文本颜色 使用Java脚本更改HTML标记中特定文本的颜色 如何使用javascript根据背景颜色更改文本颜色？ 仅使用Javascript / HTML单击时如何更改按钮的文本和颜色 html5文件输入-如何使用javascript更改文件文本的颜色？ 使用javascript更改文本颜色
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM