Question

我正在建立一个小网站，为我所在大学的一个部门提供一些资源。一切都很顺利，所以我试图添加一些功能，使事情更直观。

如果您想查看完整的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语句来确定'today'是否在每个阵营的开始和结束日期之间。如果这是真的，它会将“active”类添加到与该阵营对应的行中。

对于前两个阵营似乎正常工作......也就是说，如果我将'今天'的值更改为5月31日，则会突出显示第一行。或者，如果我将其更改为6月15日，则会突出显示第二行。问题是，如果'今天'是6月15日，它应该突出显示summer_enrichment和soccer_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>

感谢所有人！

Answer 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');
    }
}

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

Answer 2

注释：

在您的代码中：

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

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

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

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

使用Date.UTC()：

，可以很容易地从UTC值创建本地日期对象

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

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

Answer 3

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

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

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

祝你好运！

Answer 4

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

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

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

Answer 5

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

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

将第一个日期与第二个日期进行比较并返回一个数字表明他们的相对价值。 -1 =这是＆lt;日期。 0 = 价值是平等的。 1 =这是＆gt;日期。

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

在此处下载图书馆：

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

另外，值得一提的是结帐moment.js。我认为这两个库相互补充。

JavaScript根据日期更改表行类

5 个答案: