Javascript jQuery每5个工作小时重置一次颜色模式

下面我有一个基本脚本，它从HTML中的字段（工作时间）中提取数字，然后匹配模式。如果特定工作时间达到1小时，HTML文本（注释）的颜色将发生变化

我的问题是如何使脚本变小，第二部分是如何重置颜色模式，使其每5小时循环一次。因此，如果工作时间达到20小时，则颜色模式应循环4次

谢谢你的帮助

        var str = $(".work-hours").text();
        var pattern = /[0-9]+/;
        var match = str.match(pattern);

        if (parseInt(match) == 0) {
            $('.notes').css('color','white');
        }
        if ((parseInt(match) >= 1) && (parseInt(match) < 2)) {
            $('.notes').css('color','green');
        }
        if ((parseInt(match) >= 2) && (parseInt(match) < 3)) {
            $('.notes').css('color','yellow');
        }
        if ((parseInt(match) >= 3) && (parseInt(match) < 4)) {
            $('.notes').css('color','orange');
        }
        if ((parseInt(match) >= 4) && (parseInt(match) < 5)) {
            $('.notes').css('color','pink');
        }
        if (parseInt(match) >= 5) {
            $('.notes').css('color','red');
        }

var str=$（“.work hours”）.text（）；
变量模式=/[0-9]+/；
变量匹配=str.match（模式）；
if（parseInt（match）==0）{
$（'.notes'）.css（'color'，'white'）；
}
如果（（parseInt（匹配）>=1）和&（parseInt（匹配）<2））{
$（'.notes'）.css（'color'，'green'）；
}
如果（（parseInt（匹配）>=2）和&（parseInt（匹配）<3））{
$（'.notes'）.css（'color'，'yellow'）；
}
如果（（parseInt（匹配）>=3）和&（parseInt（匹配）<4））{
$（'.notes'）.css（'color'，'orange'）；
}
如果（（parseInt（匹配）>=4）和&（parseInt（匹配）<5））{
$（'.notes'）.css（'color'，'pink'）；
}
如果（parseInt（匹配）>=5）{
$（'.notes'）.css（'color'，'red'）；
}

帮助回答第一个问题，因为if语句只有一行，所以不需要括号

要回答第二个问题，请使用mod符号，

%

，而不是等号

    var str = $(".work-hours").text();
    var pattern = /[0-9]+/;
    var match = str.match(pattern);

    if (parseInt(match)%5 === 0) 
        $('.notes').css('color','green');
    if (parseInt(match)%5 === 1)
        $('.notes').css('color','yellow');
    if (parseInt(match)%5 === 2) 
        $('.notes').css('color','orange');
    if (parseInt(match)%5 === 3) 
        $('.notes').css('color','pink');
    if (parseInt(match)%5 === 4)
        $('.notes').css('color','red');

---

对于问题的第二部分，您可以使用

setInterval

函数根据特定的时间间隔运行任何函数

function changeColor()
{
    ...
}

setInterval(changeColor, 5*60*60*1000); //Works every five hours

---

由于parseInt使其成为下限值，因此可以像这样简化代码

var str=$（“.work hours”）.text（）；
变量模式=/[0-9]+/；
变量匹配=str.match（模式）；
var colors=[“白色”、“绿色”、“黄色”、“橙色”、“粉色”、“红色”]；
$（'.notes'）.css（'color'，colors[parseInt（match）]存储一个颜色字符串数组，根据匹配情况切换到6种颜色，而不是5种。“每5小时循环一次”是什么意思？唯一缺少的是带解释的setInterval-然后这是一个完整的答案。谢谢。这似乎只适用于前5个小时。work hours字符串将根据您的工作时间累积，因此它可以停止或累积。那么setInterval就不行了。但是，当你达到6小时时，如何使颜色变为白色呢？或者当你达到11时变成红色？因为有6种颜色，它不会在20时变成红色，而是在23时变成红色
colors = ['white', 'green', 'yellow', 'orange', 'pink', 'red'] ;
$('.notes').css('color',colors[$(".work-hours").text()
           .match(/[0-9]+/)[0] % colors.length]);