根据时间/营业时间显示/隐藏 div

Question

我正在尝试根据开放时间显示/隐藏 div。

div .open包含标题“Our store is open”，另一个 div .close包含标题“Our store is close”。

商店的营业时间如下：

周一：09:00-12:00 & 14:00-18:00

周二：08:30-12:00 & 13:30-18:00

周三：09:00-12:00 & 14:30-18:00

周四：09:00-12:00 & 14:00-18:00

周五：09:00-12:00 & 14:30-18:00

周六：08:00-11:30

周日：关闭

时区是德国 (UTC+1)。

因此，在开放时间内，应显示带有 class .open的 div，而应隐藏带有 class .close的另一个 div。

在关闭期间，应显示带有 class .close的 div，并应隐藏带有 class .open的 div。

我还尝试添加商店关闭一整天的特殊日子。 例如，12 月 24 日和 12 月 26 日。

我已经尝试了很多但总是失败，我希望有人能帮助我解决这个问题。 非常感谢对此的任何评论，因为我现在已经搜索了几个小时的解决方案。

我已经尝试了以下代码（它有效，但只适用于开始和结束时间——我没有设法在每一天休息。同样，我没有设法拒绝特殊日子（12 月 24 日和 26 日）关闭):

 var openHours = [ { openHour: -1, openMinute: -1, closeHour: -1, closeMinute: -1, }, { openHour: 9, openMinute: 00, closeHour: 18, closeMinute: 00, }, { openHour: 8, openMinute: 30, closeHour: 18, closeMinute: 00, }, { openHour: 9, openMinute: 00, closeHour: 18, closeMinute: 00, }, { openHour: 9, openMinute: 00, closeHour: 18, closeMinute: 00, }, { openHour: 9, openMinute: 00, closeHour: 18, closeMinute: 00, }, { openHour: 8, openMinute: 00, closeHour: 11, closeMinute: 30, } ]; var d = new Date(); var dayOfWeek = d.getDay(); var hour = d.getHours(); var mins = d.getMinutes(); var open = true; var todayHours = openHours[dayOfWeek]; if (hour >= todayHours.openHour && hour <= todayHours.closeHour) { if ((hour==todayHours.openHour && mins < todayHours.openMinute) || (hour==todayHours.closeHour && mins > todayHours.closeMinute)) { open = false; } else { open = true; } } else { open = false; } if (open) { $('.open').show(); $('.close').hide(); } else { $('.open').hide(); $('.close').show(); }

Answer 1

我认为，您的代码应该可以工作...以下对我有用：

 const openHours = [{ openHour: -1, openMinute: -1, closeHour: -1, closeMinute: -1, }, { openHour: 9, openMinute: 00, closeHour: 18, closeMinute: 00, }, { openHour: 8, openMinute: 30, closeHour: 18, closeMinute: 00, }, { openHour: 9, openMinute: 00, closeHour: 18, closeMinute: 00, }, { openHour: 9, openMinute: 00, closeHour: 18, closeMinute: 00, }, { openHour: 9, openMinute: 00, closeHour: 18, closeMinute: 00, }, { openHour: 8, openMinute: 00, closeHour: 11, closeMinute: 30, } ]; const d = new Date("February 14, 2022 18:00:00"); const dayOfWeek = d.getDay(); const hour = d.getHours(); const mins = d.getMinutes(); const todayHours = openHours[dayOfWeek]; let open = true; if (hour >= todayHours.openHour && hour <= todayHours.closeHour) { if ((hour == todayHours.openHour && mins < todayHours.openMinute) || (hour == todayHours.closeHour && mins > todayHours.closeMinute)) { open = false; } else { open = true; } } else { open = false; } if (open) { document.querySelector(".isopen.close").classList.add("hide"); } else { document.querySelector(".isopen.open").classList.add("hide"); }

 div.isopen { color: white; font-size: 2rem; width: max-content; padding: 1rem; margin: auto; height: 3rem; text-align: center; } div.isopen.open { background-color: green; } div.isopen.close { background-color: red; } div.isopen.hide { display: none; }

 <div class="isopen open">Open</div> <div class="isopen close">Closed</div>