“Open / Close” in the admin panel of the site

 // Получаем текущую дату и время 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>