jquery - показать/скрыть div в зависимости от дня и времени

Question

Я пытаюсь показать конкретный div в зависимости от дня и времени.

Так что, если день между понедельник - пятница и время между 9 утра - 5:30 вечера,

, то он будет показывать деления = class.open

, если до или после этого времени, он будет show div = class.closed

У меня есть следующий код, который работает, чтобы показать .open div при открытии с понедельника по пятницу с 9:00 до 17:00. И он покажет .closed div от 0am до 9 утра. Но мне нужно, чтобы он показывал закрытый div в любое время, когда он находится вне понедельника по пятницу с 9 до 17 часов.

Так что у меня 2 вопроса:

1. Как иметь .closed Дива шоу всякий раз, когда это не понедельник-пятницу 9 утра до 5 вечера?

2. Как добавить минуты, например, с 8:30 до 17: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, идентификаторы вместо классов и синхронизированную обновления.

Answer 3

Опираясь на ответ Лукаса, это простое добавление, чтобы за несколько минут:

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

Answer 4

Спасибо всем, что помогло. @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>