Для удобства пользования Вашим интернет-ресурсом можно разместить режим работы, например, на странице контактов. Чтобы пользователь быстро сориентировался можно выделить текущий день со временем работы. В данной статье мы разберём как сделать блок “Режим работы” с указанием сегодняшнего дня. Будем использовать технологии HTML+JS+CSS
HTML режима работы
Создадим HTML тело документа и подключим библиотеку jQuery.
В блоках “День-время работы” создадим атрибут data-day, который будет отвечать за порядковый номер дня недели
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--Подключаем библиотеку-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div class="grafik-test">
<div data-day="1"><div class="grafik-test">
<div data-day="1">Пн<span>8:00–17:00</span></div>
<div data-day="2">Вт<span>8:00–17:00</span></div>
<div data-day="3">Ср<span>8:00–17:00</span></div>
<div data-day="4">Чт<span>8:00–17:00</span></div>
<div data-day="5">Пт<span>8:00–17:00</span></div>
<div class="halfs" data-day="6">Сб<span>выходной</span></div>
<div class="halfs" data-day="7">Вс<span>выходной</span></div>
</div></div>
</div>
</body>
</html>
JS скрипт определения текущего дня
Добавим скрипт, который будет определять текущий день недели. JS можно добавить в тело HTML документа перед закрывающим тегом </body> или в отдельный подключаемый файл с расширением .js
<script>
jQuery(document).ready(function(){
var date = new Date(); // Создаём переменную типа Date()
var weekdays = ["7", "1", "2", "3", "4", "5", "6"]; // Создаём массив дней
var weekday = weekdays[date.getDay()]; //Получаем номер текущего день
jQuery('.grafik-test div[data-day="'+weekday+'"]').addClass('today'); //Добавляем класс
});
</script>
Стили CSS режима работы
Стилизуем наши блоки режима работы с помощью CSS кода. Класс today будет добавляться к блоку, чьё значение атрибута data-day будет совпадать с порядковым номером дня недели.
.grafik-test{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.grafik-test div{
display: flex;
flex-direction: column;
align-items: center;
width: 100px;
background: #fff;
border-radius: 5px;
margin: 10px !important;
box-shadow: 0px 0px 10px #bebebe;
}
.grafik-test div span{
}
.grafik-test div.today{
background: #ef7f11;
color: #fff;
}
