Здравствуйте. Стоит следующая задача:
есть картинка и необходимо постепенно ее открывать. Чтобы было понятнее вот как сейчас реализовано:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="script.js"></script>
<style>
.block{
position:absolute;
width:423px;
height: 423px;
}
.white{
background-color:black;
width:141px;
height: 141px;
float:left;
position: relative;
}
.wrapper{
width:423px;
height: 423px;
}
</style>
</head>
<body>
<div class="block"><img src="5087_msize.jpg"></div>
<div class="wrapper">
<div class="white" id="1"></div>
<div class="white" id="2"></div>
<div class="white" id="3"></div>
<div class="white" id="4"></div>
<div class="white" id="5"></div>
<div class="white" id="6"></div>
<div class="white" id="7"></div>
<div class="white" id="8"></div>
<div class="white" id="9"></div>
</div>
</body>
</html>
Тут у нас блок с картинкой, и поверх ее 9 блоков с черными квадратами. Затем яваскриптом делаю так, чтобы эти блоки исчезали в рендомном порядке.
$(document).ready(function(){
function randomInteger(min, max) {
var rand = min - 0.5 + Math.random() * (max - min + 1)
rand = Math.round(rand);
return rand;
}
var random;
var timerId = setInterval(function() {
random = randomInteger(1,9);
console.log(random);
$("#"+random).css("background-color","transparent");
}, 1000);
});
Сразу сталкиваюсь с такой проблемой: когда я рендомно генерирую числа, они повторяются. И как следствие блок с каким либо ID может очень долго не пропадать. У меня есть мысль что стоило бы все блоки заключить в массив и рендомно выбирать значение оттуда, после чего убирать его из массива и проводить следующую итерацию. Но как это сделать не совсем понимаю
