Блог

Главная - Вопросы по программированию - Как показать открыто / закрыто на основе часов работы в две смены на веб-сайте

Как показать открыто / закрыто на основе часов работы в две смены на веб-сайте

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я пытаюсь отобразить открытое или закрытое на основе смены (две смены в день), используя 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 amp;amp; openTime <= hhmm amp;amp; 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(/ *inactiveb/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>

Ответ №1:

Успешно выполнено после попыток и выполнения метода проб и ошибок.