堆栈内存溢出
  简体   繁体   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  9   1    javascript/ html/ css/ dom

问题描述

I have created a timetable.我已经制定了时间表。 I want the color of the subject to change during the time of the subject, according to the time automatically.我希望主题的颜色在主题的时间内根据时间自动改变。 But the Javascript code is not working.但是 Javascript 代码不起作用。 Please help me fix the code.请帮我修复代码。

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

The code for HTML and Javascript: 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>

The CSS code: 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) will return, say <li class="head" id="2">Wednesday</li> . document.getElementById(count)会返回，比如<li class="head" id="2">Wednesday</li> 。

Since you wish to select the sibling element, say <li id="three"><a href="">English</a></li> you could use:由于您希望 select 兄弟元素，说<li id="three"><a href="">English</a></li>你可以使用：

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

which will select the parent element of <li class="head" id="2">Wednesday</li> and then search for an element with id of z in it's descendants.这将 select 的父元素<li class="head" id="2">Wednesday</li>然后在其后代中搜索 id 为z的元素。

But, you need to give the color to a tag inside it.但是，您需要将颜色赋予其中a标签。 So, the code finally becomes:所以，代码最终变成：

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

( Notice the absence of innerHTML , check this out: innerHTML ) （注意没有 innerHTML ，看看这个： innerHTML ）

The final Javascript part becomes:最终的 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();

Note that I did var d = new Date(2021, 02, 03, 11, 31, 11);请注意，我做了var d = new Date(2021, 02, 03, 11, 31, 11); just to check that it's working, replace this with new Date() .只是为了检查它是否正常工作，请将其替换为new Date() 。 Also, I have added few missing parenthesis.另外，我添加了一些缺少的括号。

暂无
暂无

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

相关问题 使用javascript更改html中文本的颜色 - change color of a text in html using javascript 使用JavaScript更改HTML中的文本背景颜色 - Change Text BackGround Color in HTML using JavaScript 如何使用javascript for循环更改文本颜色？ - How to change text color using javascript for loop? 如何使用JavaScript更改文本颜色 - How to change text color using Javascript 如何使用jQuery或JavaScript更改文本颜色 - how to change the text color using jquery or javascript 使用Java脚本更改HTML标记中特定文本的颜色 - Change color of specific text within HTML tags using Javascript 如何使用javascript根据背景颜色更改文本颜色？ - How to change text color as per background color using javascript? 仅使用Javascript / HTML单击时如何更改按钮的文本和颜色 - How to change text and color of a button when it is clicked using Javascript/HTML only html5文件输入-如何使用javascript更改文件文本的颜色？ - html5 file input - how do I change the color of the file text using javascript? 使用javascript更改文本颜色 - Change color of text using javascript
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM