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

Zyuzka,
<!DOCTYPE HTML>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        header {
            width: 225px;
            height: 32px;
            border: 1px solid black;
        }
        header>div {
            width: 13px;
            height: 15px;
            border: 1px solid black;
            background-color: white;
            float: left;
            cursor: default;
        }
        .time {
            border: 0;
            width: 15px;
        }
    </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;
                        }
                    }
                }(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"></div>
        <div id="a1"></div>
        <div id="a2"></div>
        <div id="a3"></div>
        <div id="a4"></div>
        <div id="a5"></div>
        <div id="a6"></div>
        <div id="a7"></div>
        <div id="a8"></div>
        <div id="a9"></div>
        <div id="a10"></div>
        <div id="a11"></div>
        <div id="a12"></div>
        <div id="a13"></div>
        <div id="a14"></div>
    </header>
</body>





</html>

Последний раз редактировалось рони, 08.02.2015 в 17:42.
Ответить с цитированием