Zyuzka,
ок h!
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
header {
width: 780px;
height: 100px;
border: 1px solid black;
}
header>div {
width: 50px;
height: 50px;
border: 1px solid black;
background-color: white;
float: left;
cursor: default;
}
.time {
border: 0;
width: 50px;
}
</style>
<script>
function test() {
var divs;
for (var j = 0; j < 15; j++) {
divs = document.getElementById('h' + j);
divs.onclick = function(j) {
return function() {
var color = "linear-gradient(to right, blue, blue)"
for (var i = 0; i < 15; i++) {
divs = document.getElementById('a' + i);
var h = document.getElementById('h' + i)
divs.style.backgroundImage = j == i ? (color = '',"linear-gradient(to right, blue 50%, white 50%)") : color;
h.style.fontWeight = j >= i ? 'bold' : '';
h.style.color = j >= i ? '#0000FF' : '';
h.style.fontSize = j >= i ? 'larger' : '';
}
}
}(j)
}
}
</script>
</head>
<body onload="test()">
<header>
<div class="time" id="h0">10</div>
<div class="time" id="h1">11</div>
<div class="time" id="h2">12</div>
<div class="time" id="h3">13</div>
<div class="time" id="h4">14</div>
<div class="time" id="h5">15</div>
<div class="time" id="h6">16</div>
<div class="time" id="h7">17</div>
<div class="time" id="h8">18</div>
<div class="time" id="h9">19</div>
<div class="time" id="h10">20</div>
<div class="time" id="h11">21</div>
<div class="time" id="h12">22</div>
<div class="time" id="h13">23</div>
<div class="time" id="h14">24</div>
<div id="a0">w</div>
<div id="a1">w</div>
<div id="a2">w</div>
<div id="a3">w</div>
<div id="a4">w</div>
<div id="a5">w</div>
<div id="a6">w</div>
<div id="a7">w</div>
<div id="a8">w</div>
<div id="a9">w</div>
<div id="a10">w</div>
<div id="a11">w</div>
<div id="a12">w</div>
<div id="a13">w</div>
<div id="a14">w</div>
</header>
</body>
</html>