开放时间 - DIV取决于星期几和小时

时间:2017-09-01 14:52:22

标签: javascript jquery html css

我有一个脚本,根据星期几和一天中的时间显示不同的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>

3 个答案:

答案 0 :(得分: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]){ //..

答案 1 :(得分:1)

您可以构建一个数组来表示一周中的每一天,并在其中包含打开/关闭小时。

另外,我会更改你的“status”变量来存储一个布尔值,而不是一个字符串,因为它有效地回答了“是或否”的问题 - 为什么不把它称为“打开”并使其值为true或false ?非常挑剔,但这种方式更为正确。字符串比较很笨拙。

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>

答案 2 :(得分:0)

你可以把日程表放在一个数组中,然后在你开启的时候进行jsut检查,检查当前时间是否在数组的开始和结束时间之间