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

jquery - show / hide div depending on day and time

提问by AlwaysLearning

I am trying to show a specific div depending on the day and time.

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

So if the Day is between Monday - Friday and the Time is between 9am - 5:30pm,

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

then it will show div = class.open

然后它会显示 div = class.open

if before or after that time, it will show div = class.closed

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

I have the following code that works to show the .open div when open, Monday-Friday 9am to 5pm. And it will show the .closed div from 0am to 9am. But I need it to show the closed div anytime it is outside of Monday-Friday 9am-5pm.

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

So I have 2 questions:

所以我有两个问题：

1. How do I have the .closed div show whenever it is not Monday-Friday 9am to 5pm?

2. How can I add minutes in, like open 8:30am to 5:30pm?

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

2. 如何添加分钟数，例如从上午 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();
    }


});

Here is the example: JSFiddle

这是示例：JSFiddle

回答by Jamie Barker

Compare the getTime()'s of the dates specified.

比较getTime()指定日期的's。

The below code sets Opening Time and Closing Time of the current day and checks whether the current time is between those two time stamps.

下面的代码设置当天的开放时间和关闭时间，并检查当前时间是否在这两个时间戳之间。

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>

回答by Marco Sulla

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

Consider using moment.js, IDs instead of classes and a timed refresh.

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

回答by AlwaysLearning

Thanks to all that helped. @gibberish, great answer thanks. @Jamie, thanks for the detailed info and script rewrite. works perfect.

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

I added the below so that it may help someone in the future looking for this answer and why it works/ how to modify it.

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

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>

回答by cssyphus

Building on Lucas' answer, this is a simple addition to allow for minutes:

基于卢卡斯的回答，这是一个简单的补充，允许几分钟：

jsFiddle Demo

jsFiddle 演示

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