Javascript 根据一天中的时间更改哪一天的表行背景颜色_Javascript_Html_Css

Javascript 根据一天中的时间更改哪一天的表行背景颜色

javascript html css

Javascript 根据一天中的时间更改哪一天的表行背景颜色,javascript,html,css,Javascript,Html,Css,我有一个HTML文件，静态显示我的学校时间表。如何使表格行在一天中根据时间改变背景颜色？我希望仅在教室期间，教室行具有不同的背景色，然后在第一个时段的行具有不同的背景色时恢复正常。一整天都是这样 <!DOCTYPE html> <html> <head> <title>Schedule 1</title> <style> body { background-color: black; color:white;

我有一个HTML文件，静态显示我的学校时间表。如何使表格行在一天中根据时间改变背景颜色？我希望仅在教室期间，教室行具有不同的背景色，然后在第一个时段的行具有不同的背景色时恢复正常。一整天都是这样

<!DOCTYPE html>
<html>
<head>
<title>Schedule 1</title>
<style>
body {
    background-color: black;
    color:white;
    text-align: center;
}
table, th, td {
    color: black;
    background-color: white;
    text-align: center;
    border: 2px solid black;
    border-collapse: collapse;
    font-size: 25px;
    margin: auto;
    padding: 5px;
}
th {
    width: 300px;
    height: 40px;
}
td:nth-child(1) {
    width: 80px;
}
td:nth-child(2) {
    width: 160px;
}
.table {
    height: 500px;
}
</style>
</head>
<br><br>
<h1 style="color:white; bgcolor:black">SCHEDULE 1</h1>
<div class="table">
<table class="schedule">
 <tr>  <th width="300" colspan="2">REGULAR</th> </tr>
 <tr>  <td>HR</td><td>8:04 - 8:17</td> </tr>
 <tr>  <td>1</td><td>8:21 - 9:06</td> </tr>
 <tr>  <td>2</td><td>9:10 - 9:55</td> </tr>
 <tr>  <td>3</td><td>9:59 - 10:44</td> </tr>
 <tr>  <td>4</td><td>10:48 - 11:33</td> </tr>
 <tr>  <td>5</td><td>11:37 - 12:22</td> </tr>
 <tr>  <td>6</td><td>12:26 - 1:11</td> </tr>
 <tr>  <td>7</td><td>1:15 - 2:01</td> </tr>
 <tr>  <td>8</td><td>2:05 - 2:50</td> </tr>
</table>
</div>
</body>
</html>


附表1
身体{
背景色：黑色；
颜色：白色；
文本对齐：居中；
}
表，th，td{
颜色：黑色；
背景色：白色；
文本对齐：居中；
边框：2件纯黑；
边界塌陷：塌陷；
字体大小：25px；
保证金：自动；
填充物：5px；
}
th{
宽度：300px；
高度：40px；
}
运输署：第n名儿童（1）{
宽度：80px；
}
运输署：第n名儿童（2）{
宽度：160px；
}
.桌子{
高度：500px；
}



附表1
有规律的
HR8:04-8:17
18:21 - 9:06 
29:10 - 9:55 
39:59 - 10:44 
410:48 - 11:33 
511:37 - 12:22 
612:26 - 1:11 
71:15 - 2:01 
82:05 - 2:50

您可以做类似的事情，它使用jQuery。在javascript中，找出是白天还是晚上（如果需要，可以检查更多次），然后根据结果更新dom样式。（这是24小时格式，您可以将其更改为12小时格式，以使您的

if/else

语句更简单，如下所示：

（（hourCompare+11）%12+1）

var d=新日期（）；
var hourCompare=d.getHours（）；
如果（hourCompare>=8&&hourCompare您是否编写了JavaScript来尝试并完成此任务？没有。我刚刚开始查看w3schools网站，因为我怀疑JavaScript可能是一个可行的解决方案。感谢您提供的脚本。我会让er试一试。这是只在打开页面时执行，还是它会整天检查时间long？我需要它来做后者，而不是前者。顺便说一句，我对javascript没有任何经验。但是，我正在看w3schools.com网站开始学习。这只会在页面加载时执行，但你可以将它包装在一个函数中，每x分钟调用一次。你想用上面发布的html来完成吗？我可以如果需要的话，为您准备一个JSFIDLE。我编辑了我的答案并提供了一个JSFIDLE，让我知道它是否有效。如果有效，请标记我的答案。我以前从未见过JSFIDLE。太酷了。谢谢Austin！在工作职责之间，我一直在研究和修改JSFIDLE，看看我能学到什么，我理解什么，我将去哪里g误入歧途。不幸的是，当我尝试在笔记本电脑上学习的内容时，我还没有取得成功……但是。当我更好地理解事情时，我会报告我所看到的。我在javascript窗口中对JSFIDLE所做的更改似乎起到了作用。但是，我的HTML文件似乎无法识别我的.js文件。我在上面列出了以下内容结束语。这是正确的地方还是我误解了我在学校读到的内容？
var d = new Date();
var hourCompare = d.getHours();
if (hourCompare >= 8 && hourCompare <= 22) {
    //day time
    $('.tableCell').css("background-color", "yellow");
} else {
    //night time
    $('.tableCell').css("background-color", "blue");
}