jquery - 根據日期和時間顯示/隱藏div

Question

我試圖根據日期和時間顯示特定的div。

所以如果這一天是在星期一到星期五之間，那么時間是在上午9點到下午5點半之間，

然后它將顯示div = class.open

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

我有以下代碼，用於在周一至周五上午9點至下午5點打開時顯示.open div。 並且它將顯示從上午0點到早上9點的.closed div。 但我需要它在周一至周五上午9點至下午5點之外的任何時間顯示封閉的div。

所以我有兩個問題：

1. 如果不是周一至周五上午9點到下午5點，我該如何進行.closed div show？

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> 

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，感謝您詳細的信息和腳本重寫。 工作完美。

我添加了以下內容，以便將來可以幫助某人尋找這個答案以及它為什么工作/如何修改它。

碼

 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

在盧卡斯的回答基礎上，這是一個簡單的補充，允許分鍾：

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