如何在网站上根据两班工作时间显示开/关答案

【问题标题】：How to show Open/Closed based on two shift working hours on website如何在网站上根据两班工作时间显示开/关
【发布时间】：2020-12-27 02:27:23
【问题描述】：

我正在尝试使用 Javascript 根据班次（每天两次）显示打开或关闭。我希望能够使用存储在跨度内的数据，然后确定业务是打开还是关闭并显示出来。对我来说，只有一个班次在第二班工作，它的显示我们现在关门了。做同样的事情可能会更好，但只能在 HTML 中。任何其他建议表示赞赏。

这是我目前的代码：

function isOpen(timeRangeEl, date) {
    var day = '' + date.getDay();
    var hhmm = ('0' + date.getHours()).slice(-2) + ':' + ('0' + date.getMinutes()).slice(-2);

    var days = timeRangeEl.getAttribute('data-days');
    var openTime = timeRangeEl.getAttribute('data-open');
    var closeTime = timeRangeEl.getAttribute('data-close');
    return days.indexOf(day) >= 0 && openTime <= hhmm && hhmm < closeTime;
}

function openClose() {
    var date = new Date();
    var display = document.getElementById('open-display');
    var els = display.getElementsByClassName('timerange');
    var anyActive = false;
    for (var i = 0; i < els.length; i++) {
        if (isOpen(els[i], date)) {
            anyActive = true;
            els[i].className = els[i].className.replace(/ *inactive\b/g, '');
        } else if (els[i].className.indexOf('inactive') < 0) {
            els[i].className += ' inactive';
        }
    }
    if (anyActive) {
        display.className = 'open';
    } else {
        display.className = 'closed';
    }
}

setInterval(openClose, 5000);
openClose();

#open-display.open > .timerange.inactive,
#open-display.open > .timerange2.inactive,
#open-display.open .days {
     display: none;
}
#open-display.open > .openclosed::before {
    content: 'We are now Open';
}
#open-display.closed > .openclosed::before {
    content: 'We are now Closed';
}

<div class="text">
<h3>Working Hours</h3>
<div id="open-display">
 <div class="openclosed"></div>
 <div class="timerange" data-days="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31" data-open="12:30" data-close="15:30"><span class="days">Noon</span> 12:30pm - 3:30pm</div>
 <div class="timerange2" data-days="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31" data-open="18:00" data-close="00:30"><span class="days">Dine</span> 6:00pm - 12:30am</div>
</div>
</div>

【问题讨论】：

标签： javascript html css

【解决方案1】：

在尝试和尝试错误方法后成功完成。

【讨论】：