javascript - jquery - 根据日期和时间显示/隐藏 div

Question

我试图根据日期和时间显示特定的 div。

因此，如果日期在周一至周五之间，时间在上午 9 点至下午 5:30 之间，

然后它会显示 div = class.open

如果在此时间之前或之后，它将显示 div = class.closed

我有以下代码可以在周一至周五上午 9 点至下午 5 点打开时显示 .open div。它会在早上 0 点到 9 点之间显示 .closed div。但我需要它在周一至周五上午 9 点至下午 5 点以外的任何时间显示关闭的 div。

所以我有两个问题:

1. 如果不是周一至周五上午 9 点到下午 5 点，我如何显示 .closed div？

2. 如何添加分钟数，例如上午 8:30 到下午 5:30 的营业时间？

代码

<div class="hours">We are OPEN</div>
<div class="closed">We are CLOSED</div>
$(document).ready(function () {

    var d = new Date();
    var dayOfWeek = d.getDay();
    var hour = d.getHours();

    // open hours Monday - Friday 9am - 5:pm = open
    if (dayOfWeek === 6 || dayOfWeek === 0 || hour <= 9 || hour >= 17) {
        $('.hours').hide();
    }
    // closed any other time than above * working from 0am -9am but none other
    if (dayOfWeek === 6 || dayOfWeek === 0 || hour <= 0 || hour >= 9) {
        $('.closed').hide();
    }


});

示例如下:JSFiddle

Answer 1

比较getTime()的指定日期。

以下代码设置当天的开盘时间和收盘时间，并检查当前时间是否在这两个时间戳之间。

var Now = new Date(),
  CurrentDay = Now.getDay(),
  OpeningTime = new Date(Now.getFullYear(), Now.getMonth(), Now.getDate(), 8, 30),
  ClosingTime = new Date(Now.getFullYear(), Now.getMonth(), Now.getDate(), 17, 30),
  Open = (Now.getTime() > OpeningTime.getTime() && Now.getTime() < ClosingTime.getTime());

if (CurrentDay !== 6 && CurrentDay !== 0 && Open) {
    $('.openstatus').toggle();
}

.hours {
  display:none;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hours openstatus">We are OPEN</div>
<div class="closed openstatus">We are CLOSED</div>