Вроде все нормально работает, но есть небольшой баг, если поставить время 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>
Подсвечиваем наступивший день, но надпись ставим в соответствии с режимом:
// Находим и обрабатываем выходные дни
$(".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>
Виртуальный выделенный сервер (VDS) становится отличным выбором
Есть лендингПопробовал сделать меню с помощью jQuery-плагина "mmenu" и видимо что-то делаю не так
Нужно спрятать ракету под UI Image и кнопками, но когда я перетаскиваю его вниз, то спрайт лежит поверх UIЧто сделать для этого?
Как сделать, что бы метод IndexOf проверял строку до конца, а не до первого совпадения?