Посмотрите на код может здесь есть ошибки.
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>