基于日期的JavaScript更改表行类

我正在一个小网站上工作，它为我所在大学的一个系提供了一些资源。一切都进行得很顺利，所以我尝试添加一些功能，使事情更加直观

如果您想查看完整的HTML结构和其他内容，下面是有问题的页面：{删除链接以保护个人内容}

基本上，这是一张桌子，上面有一行是专门为我们今年夏天负责的每个营地准备的。这一切都很好。现在，我想做的是，通过将活动类添加到行中，突出显示当前会话中所有营地的行。鉴于我在JavaScript方面的经验相当有限，我得出以下结论：

<script type="text/javascript" >
$(document).ready(function() {
    var today = new Date();

    var Traffic_Court_Start = new Date("May 31 2012 12:01 AM");
    var Traffic_Court_Stop = new Date("June 1 2012 11:59 PM");
    var Summer_Enrichment_Start = new Date("June 10 2012 12:01 AM");
    var Summer_Enrichment_Stop = new Date("June 16 2012 11:59 PM");
    var Wbb_Ind_Start = new Date("June 11 2012 12:01 AM");
    var Wbb_ind_Stop = new Date("June 14 2012 11:59 PM");
    var Soccer_Referee_Start = new Date("June 15 2012 12:01 AM");
    var Soccer_Referee_Stop = new Date("June 16 2012 11:59 PM");
    var Broadcast_Start = new Date("June 17 2012 12:01 AM");
    var Broadcast_Stop = new Date("June 21 2012 11:59 PM");
    var Tennis_1_Start = new Date("June 17 2012 12:01 AM");
    var Tennis_1_Stop = new Date("June 21 2012 11:59 PM");
    var Tennis_2_Start = new Date("June 24 2012 12:01 AM");
    var Tennis_2_Stop = new Date("June 28 2012 11:59 PM");
    var Volleyball_Start = new Date("July 8 2012 12:01 AM");
    var Volleyball_Stop = new Date("July 11 2012 11:59 PM");
    var Soccer_1_Start = new Date("July 8 2012 12:01 AM");
    var Soccer_1_Stop = new Date("July 12 2012 11:59 PM");
    var IACAC_Start = new Date("July 9 2012 12:01 AM");
    var IACAC_Stop = new Date("July 11 2012 11:59 PM");
    var Summer_Forensics_Start = new Date("July 15 2012 12:01 AM");
    var Summer_Forensics_Stop = new Date("July 28 2012 11:59 PM");
    var Soccer_2_Start = new Date("July 22 2012 12:01 AM");
    var Soccer_2_Stop = new Date("July 26 2012 11:59 PM");
    var Cross_Country_Start = new Date("July 25 2012 12:01 AM");
    var Cross_Country_Stop = new Date("July 28 2012 11:59 PM");

    if((today <= Traffic_Court_Stop && today >= Traffic_Court_Start))
        {
            document.getElementById('traffic_court').classList.add('active');
        };

    if((today <= Summer_Enrichment_Stop && today >= Summer_Enrichment_Start))
        {
            document.getElementById('summer_enrichment').classList.add('active');
        };

    if((today <= Wbb_Ind_Stop && today >= Wbb_Ind_Start))
        {
            document.getElementById('wbb_ind').classList.add('active');
        };

    if((today <= Soccer_Referee_Stop && today >= Soccer_Referee_Start))
        {
            document.getElementById('soccer_referee').classList.add('active');
        };

    if((today <= Broadcast_Stop && today >= Broadcast_Start))
        {
            document.getElementById('broadcast').classList.add('active');
        };

    if((today <= Tennis_1_Stop && today >= Tennis_1_Start))
        {
            document.getElementById('tennis_1').classList.add('active');
        };

    if((today <= Tennis_2_Stop && today >= Tennis_2_Start))
        {
            document.getElementById('tennis_2').classList.add('active');
        };

    if((today <= Volleyball_Stop && today >= Volleyball_Start))
        {
            document.getElementById('volleyball').classList.add('active');
        };

    if((today <= Soccer_1_Stop && today >= Soccer_1_Start))
        {
            document.getElementById('soccer_1').classList.add('active');
        };

    if((today <= IACAC_Stop && today >= IACAC_Start))
        {
            document.getElementById('IACAC').classList.add('active');
        };

    if((today <= Summer_Forensics_Stop && today >= Summer_Forensics_Start))
        {
            document.getElementById('summer_forensics').classList.add('active');
        };

    if((today <= Soccer_2_Stop && today >= Soccer_2_Start))
        {
            document.getElementById('soccer_2').classList.add('active');
        };

    if((today <= Cross_Country_Stop && today >= Cross_Country_Start))
        {
            document.getElementById('cross_country').classList.add('active');
        };
});
</script>

如您所见，我首先获取今天的日期，然后指定每个营地的开始和结束日期。然后，我使用一组if语句来确定每个营地的开始日期和结束日期之间是否有“今天”。如果这是真的，它会将活动类添加到对应于该营地的行中

对于前两个阵营，它似乎工作正常……也就是说，如果我将“今日”的值更改为5月31日，它将突出显示第一行。或者，如果我将其更改为6月15日，它将突出显示第二行。问题是，如果“今天”是6月15日，那么它应该同时强调夏季和足球裁判的争吵。它只突出显示了夏季铀浓缩排

我已经仔细检查了我引用的元素ID、变量的拼写等，除非我遗漏了一些明显的东西，否则一切看起来都是正确的。有什么理由不能使用我所展示的脚本吗？我不认为是这样，但是在这样的一行中使用这么多if语句有问题吗？我唯一的想法是，也许它认为它们是一堆其他的情况，但我认为我应该在每个if语句后用分号来逃避

有什么想法吗？也许是更好的方法？我四处寻找一些答案，但似乎在其他任何地方都找不到类似的答案，尽管我确信这在以前已经做过，并且有了更好的实现

谢谢你的帮助

编辑：在这些回答的帮助下，我想我会把最终的代码分享给未来可能遇到这个问题的用户

<script type="text/javascript">
$(document).ready(function() {
    var today = new Date();

    var SCHEDULE = {
        'tc': ['May 31 2012', 'June 1 2012'],
        'se': ['June 10 2012', 'June 16 2012'],
        'wbb': ['June 11 2012', 'June 14 2012'],
        'sr': ['June 15 2012', 'June 16 2012'],
        'broadcast': ['June 17 2012', 'June 21 2012'],
        'ten1': ['June 17 2012', 'June 21 2012'],
        'ten2': ['June 24 2012', 'June 28 2012'],
        'volleyball': ['July 8 2012', 'July 11 2012'],
        'soc1': ['July 8 2012', 'July 12 2012'],
        'iacac': ['July 9 2012', 'July 11 2012'],
        'sf': ['July 15 2012', 'July 28 2012'],
        'soc2': ['July 22 2012', 'July 26 2012'],
        'cc': ['July 25 2012', 'July 28 2012']
    };

    for (var camp in SCHEDULE) {
    console.log('checking ' + camp + ', dates have to be within the ' + SCHEDULE[camp] + ' range');
    //console.log(Date.parse(SCHEDULE[camp][0]));
        if (today >= Date.parse(SCHEDULE[camp][0]) && today <= Date.parse(SCHEDULE[camp][1])) {
            console.log(camp + ' is currently in session!');
            document.getElementById(camp).classList.add('active'); 
        };
    };
});
</script>

---

谢谢大家

我不确定您是否可以在日期上使用大于/小于运算符，但比较它们的时间戳肯定会起作用，因为您将使用毫秒数

您可以获得如下所示的时间戳：

var today = new Date().getTime();

---

我不确定您是否可以在日期上使用大于/小于运算符，但比较它们的时间戳肯定会起作用，因为您将使用毫秒数

您可以获得如下所示的时间戳：

var today = new Date().getTime();

退房，特别是

将第一个日期与第二个日期进行比较并返回一个数字 指示它们的相对值-1=这是<日期。0 = 价值观是平等的。1=这是>日期

和方法可能对您的问题有用：

在此处下载库：

此外，值得一提的是结帐。我认为这两个库是相辅相成的。

请查看，特别是

将第一个日期与第二个日期进行比较并返回一个数字 指示它们的相对值-1=这是<日期。0 = 价值观是平等的。1=这是>日期

和方法可能对您的问题有用：

在此处下载库：

---

此外，值得一提的是结帐。我认为这两个库是相辅相成的。

我建议在服务器端执行逻辑，这样未高亮显示的内容就不会闪烁，性能也会略有提高。一个可以说更重要的改进是，无论客户端的时间设置如何，渲染都是一致的

虽然我极力主张上述方法，但JS解决方案也可以变得更易于维护。构造代码，使其包含一个可重复使用的函数，以根据范围检查日期，并应用一个类并规范日期引用的存储方式：

var TODAY = new Date();

//Individual dates could be organized as objects,
//but using arrays below seems to be more readable and tidy
var SCHEDULE = {
    'some-class': ['May 5 2011', 'June 5 2011'],
    'some-class-a': ['May 5 2012', 'June 5 2012'],
    'some-class-b': ['May 10 2012', 'June 10 2012'],
    'some-class-c': ['May 15 2012', 'June 15 2012'],
    'some-class-d': ['May 20 2012', 'June 20 2012'],
    'some-class-e': ['May 25 2012', 'June 25 2012']
};

for (var camp_ in SCHEDULE) {
    if (TODAY >= Date.parse(SCHEDULE[camp_][0]) && TODAY <= Date.parse(SCHEDULE[camp_][1])) {
        document.getElementById(camp_).classList.add('active');
    }
}

---

在这里工作：

我建议在服务器端完成逻辑，这样未高亮显示的内容就不会闪烁，同时性能也会略有提高。一个可以说更重要的改进是，无论客户端的时间设置如何，渲染都是一致的

虽然我极力主张上述方法，但JS解决方案也可以变得更易于维护。构造代码，使其包含一个可重复使用的函数，以根据范围检查日期，并应用一个类并规范日期引用的存储方式：

var TODAY = new Date();

//Individual dates could be organized as objects,
//but using arrays below seems to be more readable and tidy
var SCHEDULE = {
    'some-class': ['May 5 2011', 'June 5 2011'],
    'some-class-a': ['May 5 2012', 'June 5 2012'],
    'some-class-b': ['May 10 2012', 'June 10 2012'],
    'some-class-c': ['May 15 2012', 'June 15 2012'],
    'some-class-d': ['May 20 2012', 'June 20 2012'],
    'some-class-e': ['May 25 2012', 'June 25 2012']
};

for (var camp_ in SCHEDULE) {
    if (TODAY >= Date.parse(SCHEDULE[camp_][0]) && TODAY <= Date.parse(SCHEDULE[camp_][1])) {
        document.getElementById(camp_).classList.add('active');
    }
}

这里的工作小提琴：

评论：

在代码中：

> var Traffic_Court_Start = new Date("May 31 2012 12:01 AM"); 

取决于了解该日期字符串格式的区域设置。日期解析依赖于实现，没有理由相信特定于美国的格式在所有浏览器中都适用 区域。唯一指定的格式是ES5中的ISO8601，并非所有浏览器都支持该格式。早期的ECMAScript ed 3中根本没有指定格式

此外，上面的代码在客户端的本地时区中创建了一个日期对象，因此两个具有不同时区设置的客户端（一个具有夏令时，另一个不具有夏令时）将把它解析为两个不同的时间

如果必须在客户机上处理日期，则最好使用UTC，并仅在必要时转换为本地日期对象。此外，与用户确认您的代码是否正确，例如，显示您认为当前日期和时间是基于sysetm设置的，这可能是错误的或与当前位置不同步

使用以下方法从UTC值创建本地日期对象非常简单：

它可以转换为一个简单的函数，接受您喜欢的任何格式。

注释：

在代码中：

> var Traffic_Court_Start = new Date("May 31 2012 12:01 AM"); 

取决于了解该日期字符串格式的区域设置。日期解析依赖于实现，没有理由相信特定于美国的格式可以在所有地区的所有浏览器中使用。唯一指定的格式是ES5中的ISO8601，并非所有浏览器都支持该格式。早期的ECMAScript ed 3中根本没有指定格式

此外，上面的代码在客户端的本地时区中创建了一个日期对象，因此两个具有不同时区设置的客户端（一个具有夏令时，另一个不具有夏令时）将把它解析为两个不同的时间

如果必须在客户机上处理日期，则最好使用UTC，并仅在必要时转换为本地日期对象。此外，与用户确认您的代码是否正确，例如，显示您认为当前日期和时间是基于sysetm设置的，这可能是错误的或与当前位置不同步

使用以下方法从UTC值创建本地日期对象非常简单：

---

它可以转换为一个简单的函数，可以接受您喜欢的任何格式。

下面是一个尝试。由于您没有使用数据库，请尝试将日期存储为数据属性。将它们转换为时间戳，以便您可以比较：

我肯定我忽略了什么，但也许这会激发一个想法

我注意到您的页面是用PHP编写的，这样做可能更容易。将营地数据存储在关联数组中，循环生成表行，并根据日期匹配情况输出标记

---

祝你好运

这里有一个尝试。由于您没有使用数据库，请尝试将日期存储为数据属性。将它们转换为时间戳，以便您可以比较：

我肯定我忽略了什么，但也许这会激发一个想法

我注意到您的页面是用PHP编写的，这样做可能更容易。将营地数据存储在关联数组中，循环生成表行，并根据日期匹配情况输出标记

---

祝你好运

出于某种原因，上面的IACAC_开始和IACAC_停止变量没有像其他变量一样突出显示…我想知道为什么？是否生成了结束/开始时间数据库？这些日期不是由数据库生成的…它们是硬编码到文档中的。因为这个网站实际上只有两个页面有这样的列表，所以我认为建立一个数据库会有点过头。但是，如果它与数据库相关，那么我可以使用获取数据的例程来设置类，上面的IACAC_开始和IACAC_停止变量没有像其他变量一样突出显示…我想知道为什么？是否生成了结束/开始时间数据库？这些日期不是由数据库生成的…它们是硬编码到文档中的。因为这个网站实际上只有两个页面有这样的列表，所以我认为建立一个数据库会有点过头。但是，如果它与数据库相关，那么我可以使用获取数据的例程来设置类。为了学习起见，如果我可以避免使用第三方脚本，我宁愿远离它，但我会调查一下，看看是否有什么可以借鉴的地方。啊。。。嗯，您可能会查看源代码，了解他们是如何实现isAfter和isBefore的。另外，在你的问题中一定要提到，你想避免使用第三方脚本Good greif，你不需要一个日期库来对日期进行simlpe运算，比如date1-date2或date1和<操作符来记录。写几个“成功”

---

不同的测试用例。尽管如此，我并没有尝试在12-13个if语句中应用它。如果我试着比较时间戳，那会是从某个固定引用开始的毫秒数，以便比较它们吗？比如说，那是1950年的毫秒还是类似的？谢谢@汤姆温切斯特1970年1月1日，是的，它是一个固定的参考。日期越大，通过测试的毫秒数就越多，我能够使用>和<操作符来记录。为几个不同的测试用例编写“成功”。尽管如此，我并没有尝试在12-13个if语句中应用它。如果我试着比较时间戳，那会是从某个固定引用开始的毫秒数，以便比较它们吗？比如说，那是1950年的毫秒还是类似的？谢谢@汤姆温切斯特1970年1月1日，是的，它是一个固定的参考。日期越长，它的毫秒数就越多。哈西·罗布，谢谢你的信息。我完全同意你在这里谈论的许多基本概念。然而，这个web应用程序只会被少数人使用……他们都在使用我个人控制的计算机。我也不太担心时区或地点。不过，正如我所说，在大多数应用程序中，这一点非常重要。但是，我将实施的一个建议是，在页面的某个位置显示日期/时间，以便用户直接知道服务器认为日期是什么。谢谢嘿，罗布，谢谢你的信息。我完全同意你在这里谈论的许多基本概念。然而，这个web应用程序只会被少数人使用……他们都在使用我个人控制的计算机。我也不太担心时区或地点。不过，正如我所说，在大多数应用程序中，这一点非常重要。但是，我将实施的一个建议是，在页面的某个位置显示日期/时间，以便用户直接知道服务器认为日期是什么。谢谢这是个不错的主意。最终，我选择了o.v.的回应，但如果我从头开始，我可能会走这条路。谢谢这是个不错的主意。最终，我选择了o.v.的回应，但如果我从头开始，我可能会走这条路。谢谢嘿，o.v.，谢谢你的回复。虽然我同意你在第一个论点中提出的观点，但我并不十分担心我的申请中的这些问题。它将被3-4个人使用，他们可能甚至不会注意到将一行的类设置为“活动”的表面变化。然而，我确实像你提到的那样将我的日期组织到数组中，并根据你的建议做了一些其他的小调整。工作得很好！再次感谢你的帮助@TomWinchester：我在上面的更新中看到，您使用的是jQuery，这一点起初并不明显，因此我的答案希望独立于任何库方法-这只是一个快速提示，要添加类活动，您可以选择使用$+camp.addClass'active'来添加；嘿，o.v.，谢谢你的回复。虽然我同意你在第一个论点中提出的观点，但我并不十分担心我的申请中的这些问题。它将被3-4个人使用，他们可能甚至不会注意到将一行的类设置为“活动”的表面变化。然而，我确实像你提到的那样将我的日期组织到数组中，并根据你的建议做了一些其他的小调整。工作得很好！再次感谢你的帮助@TomWinchester：我在上面的更新中看到，您使用的是jQuery，这一点起初并不明显，因此我的答案希望独立于任何库方法-这只是一个快速提示，要添加类活动，您可以选择使用$+camp.addClass'active'来添加；