Показать сообщение отдельно
  #30 (permalink)  
Старый 18.02.2015, 14:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

Zyuzka,
<!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);
                            divs.style.backgroundImage = j == i ? (color = '',"linear-gradient(to right, blue 50%, white 50%)") : color;
                            divs.style.fontWeight  = j >= i ? 'bold' : '';
                            divs.style.color  = j >= i ? '#FFFFFF' : '';
                            divs.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>
Ответить с цитированием