2

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

如果您想查看完整的 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 日，它应该突出显示 summer_enrichment 和 football_referee 行。它仅突出显示 summer_enrichment 行。

我已经仔细检查了我引用的元素 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>

非常感谢大家！！！

4

5 回答 5

2

我建议在服务器端完成逻辑，以便未突出显示的内容不会“闪烁”以及性能的边际改进。无论客户端的时间设置如何，一个可以说更重要的改进将是一致的渲染。

虽然我强烈主张上述内容，但 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');
    }
}

在这里工作小提琴：http: //jsfiddle.net/ovfiddle/bMBcq/

于 2012-05-17T02:05:29.453 回答
1

评论：

在您的代码中：

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

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

此外，上面在客户端的本地时区中创建了一个日期对象，因此具有不同时区设置的两个客户端（例如一个具有夏令时，一个没有）会将其解析为两个不同的时间。

如果您必须在客户端上处理日期，最好在 UTC 中执行所有操作并仅在必要时转换为本地日期对象。此外，请与用户确认您的代码正确（例如，根据系统设置显示您认为当前日期和时间，这可能是错误的或与其当前位置不同步）。

使用Date.UTC()从 UTC 值创建本地日期对象很简单：

var date = new Date(Date.UTC (year, month[, date[, hours[, minutes[, seconds[, ms]]]]]);

它可以变成一个简单的函数，接受你喜欢的任何格式。

于 2012-05-17T02:55:11.353 回答
1

这是一个尝试。由于您没有使用数据库，请尝试将日期存储为数据属性。将它们转换为时间戳，以便您进行比较：http: //jsfiddle.net/uJEJ7/26/

我确定我忽略了一些东西，但也许它会激发一个想法。

我注意到您的页面是用 PHP 编写的，走这条路可能更容易。将 Camp 数据存储在关联数组中，循环遍历它以生成表格行，并根据日期是否匹配输出标记。

祝你好运！

于 2012-05-17T05:06:20.807 回答
0

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

你可以得到这样的时间戳：

var today = new Date().getTime();
于 2012-05-17T01:25:21.303 回答
0

查看date.js，特别是...

http://code.google.com/p/datejs/wiki/APIDocumentation#compare

比较第一个日期和第二个日期并返回它们相对值的数字指示。-1 = 这是 < 日期。0 = 值相等。1 = 这是 > 日期。

和方法可能对您的问题有用isAfter():)isBefore()

在此处下载库：

http://code.google.com/p/datejs/downloads/detail?name=date.js&can=2&q=

此外，值得一提的是 checkout moment.js。我认为这两个库是相辅相成的。

于 2012-05-17T01:30:40.083 回答