2

Вроде все нормально работает, но есть небольшой баг, если поставить время 11:00 - 01:00. Показывается статус закрыто

// Получаем текущую дату и время
let oCurrDate = new Date();
// Получаем элемент с текущим днём недели
let oCurrDay = $(".calendarik").eq(oCurrDate.getDay() == 0 ? 6 : oCurrDate.getDay() - 1);
// Подсвечиваем текущий день недели
oCurrDay.addClass("current");
// Парсим часы работы в тексте пункта
let aPartTime = oCurrDay.text().match(/(\d+)/gi);
// Получаем текущий час
let nHour = oCurrDate.getHours();
// Создаём блок для надписи о статусе
let oStatus = $("<span>");
// Если текущий час попадает в рабочий промежуток,
// тогда устанавливаем нужный текст с нужным цветом
if (nHour >= aPartTime[0] && nHour < aPartTime[2]) {
  oStatus.css("color", "green").html("ОТКРЫТО");
} else {
  oStatus.css("color", "red").html("ЗАКРЫТО");
}
// Отображаем статус около текущего дня
oCurrDay.append(oStatus);
.calendarik { font: bold 18px "Arial", sans-serif; color: #555; }

.current { color: #07e; }

span {
  display: inline-block;
  width: 6.4em;
  padding: 0 1em;
  letter-spacing: 0px;
  font: bold 1em "Courier New", monospace;
  animation: pulse 1.8s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { letter-spacing: 0px; text-align: left; }
  25%, 76% { letter-spacing: 0.3em; text-align: left; }
  26%, 75% { letter-spacing: 0.3em; text-align: right; }
  50% { letter-spacing: 0px; text-align: right; }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-group">
  <li class="list-group-item calendarik"><b>Понедельник:</b> 10:00–18:00</li>
  <li class="list-group-item calendarik"><b>Вторник:</b> 10:00–18:00</li>
  <li class="list-group-item calendarik"><b>Среда:</b> 10:00–18:00</li>
  <li class="list-group-item calendarik"><b>Четверг:</b> 10:00–18:00</li>
  <li class="list-group-item calendarik"><b>Пятница:</b> 10:00–18:00</li>
  <li class="list-group-item calendarik"><b>Суббота:</b> 10:00–18:00</li>
  <li class="list-group-item calendarik"><b>Воскресение:</b> 10:00–18:00</li>
</ul>

0

1 ответ 1

3
+50

Подсвечиваем наступивший день, но надпись ставим в соответствии с режимом:

// Находим и обрабатываем выходные дни
$(".calendarik").each(function() {
  let oWorkingHours = $(this).contents().filter(function() {
    return this.nodeType === Node.TEXT_NODE;
  });
  let sRest = $(oWorkingHours).text();
  if (!sRest || !/[а-яё0-9-:]/gi.test(sRest)) {
    $(this).append("<span class='rest'>00:00 - 00:00</span>");
  } else if (/Выходной/gi.test(sRest)) {
    $(oWorkingHours).replaceWith("<span class='rest'>00:00 - 00:00</span>");
  } else if (sRest.match(/(\d+)/gi)[0] == sRest.match(/(\d+)/gi)[2]) {
    $(oWorkingHours).replaceWith("<span class='rest'>00:00 - 00:00</span>");
  }
});
// Получаем текущую дату и элемент с текущим днём недели
let oCurrDate = new Date();
let oCurrDay = $(".calendarik").eq(oCurrDate.getDay() == 0 ? 6 : oCurrDate.getDay() - 1);
// Парсим в тексте элемента часы работы текущего дня
let aCurrPartTime = oCurrDay.text().match(/(\d+)/gi).map(string => parseInt(string));
// Получаем предыдущую дату и элемент с предыдущим днём недели
let oYestDate = new Date();
oYestDate.setDate(oYestDate.getDate() - 1);
let oYestDay = $(".calendarik").eq(oYestDate.getDay() == 0 ? 6 : oYestDate.getDay() - 1);
// Парсим в тексте элемента часы работы предыдущего дня
let aYestPartTime = oYestDay.text().match(/(\d+)/gi).map(string => parseInt(string));
// Получаем текущий час
let nHour = oCurrDate.getHours();
// Создаём блок для надписи о статусе
let oStatus = $('<span class="status">');
// Функция добавления статуса
function fStatus(oParent, oChild, bOpen) {
  if (bOpen) { oChild.css("color", "green").html("ОТКРЫТО"); } 
  else { oChild.css("color", "red").html("ЗАКРЫТО"); }
  oParent.append(oChild);
}
//// Если текущий час попадает в рабочий промежуток, тогда
//// устанавливаем нужный текст с нужным цветом у нужного дня
if (aCurrPartTime[0] > aCurrPartTime[2]) { aCurrPartTime[2] += 24; }
if (aYestPartTime[0] > aYestPartTime[2]) {
  if (nHour < aYestPartTime[2]) {
    fStatus(oYestDay, oStatus, true);
  } else if (nHour >= aYestPartTime[2] && nHour < aCurrPartTime[0]) {
    fStatus(oCurrDay, oStatus, false);
  } else {
    if (nHour >= aCurrPartTime[0] && nHour < aCurrPartTime[2]) {
      fStatus(oCurrDay, oStatus, true);
    } else {
      fStatus(oCurrDay, oStatus, false);
    }
  }
} else {
  if (nHour >= aCurrPartTime[0] && nHour < aCurrPartTime[2]) {
    fStatus(oCurrDay, oStatus, true);
  } else {
    fStatus(oCurrDay, oStatus, false);
  }
}
// Подсвечиваем текущий день недели
oCurrDay.addClass("current");
// Выделяем выходные дни
$(".calendarik .rest").text("Выходной");
.calendarik { font: normal 18px "Arial", sans-serif; color: #555; }
.current { color: #07e; }
.rest { color: #fa0; }

.status {
  display: inline-block;
  width: 6.4em;
  padding: 0 1em;
  letter-spacing: 0px;
  font: bold 1em "Courier New", monospace;
  animation: pulse 1.8s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { letter-spacing: 0px; text-align: left; }
  25%, 76% { letter-spacing: 0.3em; text-align: left; }
  26%, 75% { letter-spacing: 0.3em; text-align: right; }
  50% { letter-spacing: 0px; text-align: right; }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-group">
  <li class="list-group-item calendarik"><b>Понедельник: </b>08:00 - 08:00</li>
  <li class="list-group-item calendarik"><b>Вторник: </b>09:00 - 18:00</li>
  <li class="list-group-item calendarik"><b>Среда: </b></li>
  <li class="list-group-item calendarik"><b>Четверг: </b>09:00 - 18:00</li>
  <li class="list-group-item calendarik"><b>Пятница: </b>09:00 - 18:00</li>
  <li class="list-group-item calendarik"><b>Суббота: </b>09:00 - 15:00</li>
  <li class="list-group-item calendarik"><b>Воскресение: </b> Выходной</li>
</ul>

12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.