“Открыто / закрыто” в админ-панели сайта

118
24 августа 2019, 05:20

Вроде все нормально работает, но есть небольшой баг, если поставить время 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>

Answer 1

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

// Находим и обрабатываем выходные дни 
$(".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>

READ ALSO
Проблема с плагином jQuery mmenu

Проблема с плагином jQuery mmenu

Есть лендингПопробовал сделать меню с помощью jQuery-плагина "mmenu" и видимо что-то делаю не так

139
Условие выполнения команды WPF MVVM

Условие выполнения команды WPF MVVM

Использую PrismВо VM описываю свойство

152
Нужно спрятать спрайт за UI в unity

Нужно спрятать спрайт за UI в unity

Нужно спрятать ракету под UI Image и кнопками, но когда я перетаскиваю его вниз, то спрайт лежит поверх UIЧто сделать для этого?

112
C# IndexOf метод [закрыт]

C# IndexOf метод [закрыт]

Как сделать, что бы метод IndexOf проверял строку до конца, а не до первого совпадения?

94