营业时间 - DIV 取决于星期几和小时答案

【问题标题】：Opening hours - DIV depends on the day of the week and the hour营业时间 - DIV 取决于星期几和小时
【发布时间】：2018-02-10 16:13:43
【问题描述】：

我有一个脚本，根据星期几和一天中的时间显示不同的 div。他工作得很好。我需要修改它。我想每天设置不同的营业时间。我怎样才能做到这一点？请帮忙。

例子

周一开放时间为 8:00 至 16:00
周二开放时间为 8:00 至 16:00
周三开放时间为 8:00 至 18:00
周四开放时间为 8:00 至 18:00
周五开放时间为 8:00 至 16:00
周六收盘
周日开放时间为 8:00 至 13:00

我的脚本：

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 <= 15){
    if (hour=='9' && mins < '00'){
        status = 'closed';
    }else if (hour=='15' && mins > '30'){
        status = 'closed';
    }else{
        status = 'open';
    }
}else{
    status = 'closed';
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hours">We are OPEN</div>
<div class="closed">We are CLOSED</div>

【问题讨论】：

与您的问题无关的建议：您可以使用.toggle(status === 'open' / status !== 'open')，而不是.show() 和.hide()。然后你可以删除if ;-)

标签： javascript jquery html css

【解决方案1】：

您可以构造一个数组来表示一周中的每一天，并在其中包含开/关时间。

另外，我会更改您的“状态”变量以存储布尔值，而不是字符串，因为它有效地回答了“是或否”问题 - 为什么不直接称其为“开放”并使其值为真或假?挑剔，但这种方式更正确。字符串比较很笨拙。

var openHours = [
    {
        openHour: 8,
        openMinute: 0,
        closeHour: 13,
        closeMinute: 0
    },
    {
        openHour: 9,
        openMinute: 0,
        closeHour: 17,
        closeMinute: 30,
    },
    {
        openHour: 9,
        openMinute: 0,
        closeHour: 17,
        closeMinute: 30,
    },
    {
        openHour: 9,
        openMinute: 0,
        closeHour: 17,
        closeMinute: 30,
    },
    {
        openHour: 9,
        openMinute: 0,
        closeHour: 17,
        closeMinute: 30,
    },
    {
        openHour: 9,
        openMinute: 0,
        closeHour: 17,
        closeMinute: 30,
    },
    {
        openHour: -1,
        openMinute: -1,
        closeHour: -1,
        closeMinute: -1,
    }
];

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) {
    $('.hours').show();
    $('.closed').hide();
} else {
    $('.hours').hide();
    $('.closed').show();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hours">We are OPEN</div>
<div class="closed">We are CLOSED</div>

【讨论】：

@Mousebucks 它不起作用，因为脚本和 CSS 作为外部资源，因此您实际上并未将它们链接到 HTML 框中，并且您没有包含所需的 CSS。请参阅更新的 JSFiddle jsfiddle.net/qpd58f5x/1
@DesertIvy 好的，效果很好:) 我印象深刻。不是很优雅但很有效。 -1 关闭时？星期天是一周的第一天？
@Mousebucks 是的，周日是一周的第一天。 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…。当然不是最简洁的答案，但它是可读的，对我来说更重要。
@Mousebucks 固定时间。

【解决方案2】：

使用二维数组

// Example days
var days = [[9, 15],[8, 14],[7, 13],[6,12],[5,11],[0,0],[0,0]];

具有 [0,0] 的一天将被视为完全关闭。并将 if 语句编辑为

if (hour >= days[dayOfWeek][0] && hour < days[dayOfWeek][1]){ //..

【讨论】：

这可能会工作几个小时，但不会考虑几分钟。

【解决方案3】：

您可以将时间表放入一个数组中，然后检查您在哪一天并检查当前时间是否在数组的开始时间和结束时间之间

【讨论】：