Цитата:
|
Zyuzka,
сделайте html |
Цитата:
<html>
<head>
<title></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 () {
var color = "linear-gradient(to right, blue, blue)"
for (var j = 0; j < 15; j++) {
divs = document.getElementById('a' + j);
divs.style.backgroundImage = divs == this ? "linear-gradient(to right, blue 50%, white 50%)" : color;
if (divs == this) color = '';
}
}
}
}
</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>
|
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>
|
рони,
Огромное спасибо!!! |
Zyuzka,
убрал строку 38 ))) сейчас она в 37 |
Хочу добавить выделение текста жирным.Но выделяет только последний элемент. В чём ошибка?
var color = "linear-gradient(to right, blue, blue)";
var divSlider;
for (var i = 0; i < 15; i++) {
divsSlider = document.getElementById('a' + i);
if (j == i){
divs.style.fontWeight = "bold";
divsSlider.style.backgroundImage = (color = '',"linear-gradient(to right, blue 50%, white 50%)");
}
else {
divs.style.fontWeight = "";
divsSlider.style.backgroundImage = color;
}
}
|
Zyuzka,
6 строка и 10 почему divs? |
Цитата:
|
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>
|
| Часовой пояс GMT +3, время: 16:11. |