Форум

злобная_пипа · #1 (**permalink**) 01.10.2015, 19:42

Вот код:
function random(1, 54) {
return Math.random() * (1 - 54) + 1;
div.show({document.getElementById('box'+random).st yle.opacity = '0.1';})
};
Что не так?
Код должен 1 из 54 div(box) делать прозрачным при обновлении страницы в случайном порядке.

Lemme · #2 (**permalink**) 01.10.2015, 19:54

function rand(min, max) {
	return Math.round(min + Math.random() * (max - min));
}

document.getElementById('box'+rand(1,54)).style.opacity = '0.1';

злобная_пипа · #3 (**permalink**) 02.10.2015, 15:39

Посмотрите на код может здесь есть ошибки.

color.onclickover = function() {
    this.style.backgroundColor = 'red';
  }
  
function rand(min, max) {
return Math.round(min + Math.random() * (max - min));
}
5document.getElementById('box'+rand(1,54)).style.opacity = '0.1';

<html>
<head>

<script src="js.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />

</head>
<body>

<style>
body {
background: url(cards.png) fixed;
background-repeat: no-repeat;
background-position: center top 110px;
}

.box {
width:100px; 
height:100px;
background-color:lightgreen; 
position: center;
}

.box1 { 
    margin-left: 30;
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	float: left;
	}
	.box2 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box3 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box4 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box5 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box6 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box7 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box8 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box9 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box10 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box11 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box12 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box13 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box14 { 
	margin-left: 25;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box15 { 
	margin-left: 25;
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box16 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box17 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box18 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box19 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box20 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box21 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box22 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box23 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box24 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box25 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box26 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box27 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box28{ 
	margin-left: 30;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box29 { 
	margin-left: 25;
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box30 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box31 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box32 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box33 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box34 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box35 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box36 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box37 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box38 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box39 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box40 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box41 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box42{ 
	margin-left: 25;
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box43 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box44 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box45 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box46 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box47 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box48 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box49 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box50 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box51 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box52 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box53 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
	.box54 { 
	float: left;
    width: 99px; 
    height: 145px;
    border: solid 0px white;
	background: white;
	}
</style>

<a href="lab3.html"><div id="color"><div class="box">Обновить</center></div></div></a>

<div id="rand">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
<div class="box9"></div>
<div class="box10"></div>
<div class="box11"></div>
<div class="box12"></div>
<div class="box13"></div>
<div class="box14"></div>
<div class="box15"></div>
<div class="box16"></div>
<div class="box17"></div>
<div class="box18"></div>
<div class="box19"></div>
<div class="box20"></div>
<div class="box21"></div>
<div class="box22"></div>
<div class="box23"></div>
<div class="box24"></div>
<div class="box25"></div>
<div class="box26"></div>
<div class="box27"></div>
<div class="box28"></div>
<div class="box29"></div>
<div class="box30"></div>
<div class="box31"></div>
<div class="box32"></div>
<div class="box33"></div>
<div class="box34"></div>
<div class="box35"></div>
<div class="box36"></div>
<div class="box37"></div>
<div class="box38"></div>
<div class="box39"></div>
<div class="box40"></div>
<div class="box41"></div>
<div class="box42"></div>
<div class="box43"></div>
<div class="box44"></div>
<div class="box45"></div>
<div class="box46"></div>
<div class="box47"></div>
<div class="box48"></div>
<div class="box49"></div>
<div class="box50"></div>
<div class="box51"></div>
<div class="box52"></div>
<div class="box53"></div>
<div class="box54"></div>
</div>

</body>
</html>

ksa · #4 (**permalink**) 02.10.2015, 15:45

злобная_пипа, зачем столько повторений в каждом селекторе?

Сообщение от злобная_пипа

document.getElementById('box'+rand(1,54))

В твоем примере нет элементов с ИД начинающимися на box...

злобная_пипа · #5 (**permalink**) 02.10.2015, 16:32

Исправил, не работает. Уже четвертый день не могу сделать.

Помогите с лабой плиииииз

ksa · #6 (**permalink**) 02.10.2015, 16:46

Сообщение от злобная_пипа

Уже четвертый день не могу сделать.

Ну ты даешь!

Типа иллюстрация.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
#test > div {
	float: left;
	width: 20px;
	height: 20px;
	background-color: blue;
}
#test > div + div {
	margin-left: 5px;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div id='test'>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>
<script type='text/javascript'>
var o=document.querySelectorAll('#test > div');
var i=Math.round(Math.random()*o.length);
o[i].style.opacity=0.1;
</script>
</body>
</html>

злобная_пипа · #7 (**permalink**) 02.10.2015, 20:11

Ты что маг какой то

Спасибо чувак)

Форум

Справочник

Discord чат

Курсы javascript