Javascript 如果小时在过去、当前或未来，则尝试更改背景颜色

我试图根据当前时间是过去、现在还是将来来更改背景颜色

用例：我正在使用moment.js构建一个日程安排程序。每小时都有自己的领域，即：上午8点、上午9点、上午10点。如果当前时间是上午10:15，我希望上午9点为灰色，上午10点为红色，上午11点至下午6点为绿色

我可以使用

console.log（currentTime）

我只是想弄清楚如何构建改变类背景颜色的函数。任何帮助都将不胜感激

//当前日期和时间
$（“#currentDay”）.text（矩（）.format（'ddd，MMM-Do'）；
//currentTime，用于确定小时与颜色是否匹配
var currentTime=moment（）.格式（'H'）；
console.log（）
//todo项目
//使用window.localStoirage检索数据对象并将其存储为字符串
const LS=JSON.parse（localStorage.scheduler | |{}'）；//现在是一个对象
//双击使日历内容可编辑
$（“.textData”）.dblclick（函数（）{
$（this.addClass（'d-none'））
$（this）.this（“输入”）.removeClass（“d-none”）；
});
$（“.btn”）.dblclick（函数（）{
console.log（this）；
console.log（$（this.attr（“id”））
var id=$（this.attr（“id”）
变量时间=id.slice（0,3）
console.log（时间）
var timeInputId=时间+输入；
});
//保存使编辑结束
//设置活动时间
//将/过去时间的背景色设置为灰色/当前时间的背景色设置为红色/未来时间的背景色设置为绿色
var hourPast=hourPasthourNow，则将背景颜色设置为灰色//
var hourNow=当前时间；
console.log（hourNow）
console.log（当前时间）
函数backgroundColorEdit（）{
if（hourNow==当前时间）{
document.getElementsByClassName（“backgroundTool”）.style.backgroundColor=“#ff0000”；
}否则如果（小时当前<当前时间）{
document.getElementsByClassName（“backgroundTool”）.style.backgroundColor=“#D3”；
}否则
{
document.getElementsByClassName（“backgroundTool”）.style.backgroundColor=“#90ee90”；
}
}
//如果currentTime=hourNow，则将背景颜色设为红色//
//如果当前时间

正文{
字体系列：“开放式Sans”，无衬线；
字体大小：16px；
线高：1；
}
文本区{
背景：透明；
边界：无；
调整大小：无；
颜色：#000000；
左边框：1px纯黑；
填充：10px；
}
琼伯伦先生{
文本对齐：居中；
背景色：透明；
颜色：黑色；
边界半径：0；
边框底部：10px纯黑；
}
.说明{
空白：预包装；
}
.时间段{
文本对齐：居中；
边界半径：15px；
}
.行{
空白：预包装；
高度：80px；
边框顶部：1px纯白；；
}
.小时{
背景色：#ffffff；
颜色：#000000；
边框顶部：1px虚线#000000；
}
.过去{
背景色：#D3；
颜色：白色；
}
.现在{
背景色：#ff6961；
颜色：白色；
}
.未来{
背景色：#77dd77；
颜色：白色；
}
.saveBtn{
左边框：1px纯黑；
边框右上角半径：15px；
边框右下半径：15px；
背景色：#06AED5；
颜色：白色；
}
.saveBtn i:悬停{
字体大小：20px；
过渡：所有.3s易于输入输出；
}
瑞德先生{
背景色：红色；
}

工作日计划程序
工作日计划程序
一款简单的日历应用程序，用于安排您的工作日

上午9点
此处文本
拯救
上午10点
此处文本
拯救
上午11点
此处文本
拯救
下午12点
此处文本
拯救
下午1点
此处文本
拯救

这里有一个想法（使用简化的标记版本），它使用24小时的时间像您所想的那样进行比较

每一行都有一个

id

，指示它所代表的小时，这样就很容易将相应的小时与当前小时进行比较

const rows=document.getElementsByClassName（“行”）；
让currentHour=parseInt（矩（）.format（'H'）；
Array.from（行）.forEach（行=>{
让
rowIdString=row.id，
划船时间；
如果（行字符串）{
rowHour=parseInt（rowIdString）；
}
如果（每小时）{
//将行id与当前小时进行比较，并相应地设置颜色
如果（当前小时===行小时）{
设置颜色（行，“红色”）；
}否则如果（（当前小时<行小时）和&（当前小时>行小时-6））{
setColor（行，“绿色”）；
}否则如果（（当前小时>行小时）和&（当前小时<行小时+6））{
setColor（世界其他地区，“浅灰色”）；
}否则{
设置颜色（行，“白色”）；
}
}
});
函数setColor（元素、颜色）{
element.style.backgroundColor=颜色；
}

.row{
填充：0.5em；
边缘底部：0.4em；
边框：1px纯色灰色；
边界半径：0.5em；
}

上午9点
--此处文本--
拯救
上午10点
--此处文本--
拯救
上午11点
--此处文本--
拯救
下午12点
--此处文本--
拯救
下午1点
--此处文本--
拯救
下午2点
--此处文本--
拯救
下午三点
--此处文本--
拯救
下午4点
--此处文本--
拯救
下午5点
--此处文本--
拯救

仔细想想，我可能需要找到一种方法将时间转换为：9 10 11 12 13 14。13=1实际上，我所要做的就是让它持续24小时