Question

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

因此，如果这一天是在星期一到星期五之间，时间是在上午9点到下午5点30分之间，那么

然后会显示div = class.open

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

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

所以我有两个问题：

如果不是周一至周五上午9点至下午5点，我如何进行.closed div节目？
如何添加分钟，比如上午8:30到下午5:30？

CODE

<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()。

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

＆＃13;

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();
}

＆＃13;

.hours {
  display:none;  
}

＆＃13;

<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>

＆＃13;

Answer 2

if (dayOfWeek !== 6 && dayOfWeek !== 0 && hour >= 9 && hour < 17) {
    $('.hours').show();
    $('.closed').hide();
}
else {
    $('.hours').hide();
    $('.closed').show();
}

考虑使用moment.js，ID而不是类和定时刷新。

Answer 3

感谢所有帮助。 @gibberish，很棒的回答谢谢。 @Jamie，感谢您详细的信息和脚本重写。工作得很完美。

我添加了以下内容，以便将来可以帮助某人查找此答案及其工作原理/如何修改。

<强> CODE

var Now = new Date();
var CurrentDay = Now.getDay();
// opening time - 24 hours so 9:30am is 9, 30
var OpeningTime = new Date(Now.getFullYear(), Now.getMonth(), Now.getDate(), 11, 36);
// closing time - 24 hours so 5:30pm is 17, 30
var ClosingTime = new Date(Now.getFullYear(), Now.getMonth(), Now.getDate(), 17, 30);
var Open = (Now.getTime() > OpeningTime.getTime() && Now.getTime() < ClosingTime.getTime())
// days 0.sun 1.mon 2.tues 3.wed 4.thur 5.fri 6.sat 
// CurrentDay !== 0 && the # is the day to eclude, so if I want to be closed on Sat6, Sun0, Wed3
// CurrentDay !== 6 && CurrentDay !== 0 && CurrentDay !== 3 && Open
if (CurrentDay !== 0 && CurrentDay !== 6 && Open) {
    $('.openstatus').toggle();
}

.hours {display:none;}

<div class="hours openstatus">We are OPEN</div>
<div class="closed openstatus">We are CLOSED</div>

Answer 4

以卢卡斯为基础＆＃39;回答，这是一个简单的补充，允许分钟：

jsFiddle Demo

var d = new Date();
var dayOfWeek = d.getDay();
var hour = d.getHours();
var mins = d.getMinutes();
var status = 'open';

if (dayOfWeek !== 6 && dayOfWeek !== 0 && hour >= 9 && hour <= 17){
    if (hour=='9' && mins < '30'){
        status = 'closed';
    }else if (hour=='17' && mins > '30'){
        status = 'closed';
    }else{
        status = 'open';
    }
}else{
    status = 'closed';
}

if (status=='open') {
    $('.hours').show();
    $('.closed').hide();
}else{
    $('.hours').hide();
    $('.closed').show();
}

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

4 个答案: