How can I make this code don't repeat combinations and after finishing combinations, I should alert that it's finished.
And second question, is there any way to reset combination (reset randomise)?
Thanks in advance.
<!DOCTYPE html>
<html>
<body>
<script src="http://ift.tt/1bfiD4X"></script>
<style type="text/css">
.content{
margin-top:100px;
margin-left:16%;
float:left;
}
#about{
padding:20%;
margin-bottom:10px;
}
#btn{
padding-right:125px;
text-align:center;
}
.number{
float:left;
}
.color{
margin-top:-20px;
float:left;
}
p{
width:50px;
height:34px;
line-height:23px;
text-align:center;
}
.nmb1{
width:50px;
height:50px;
}
</style>
<div class="number">
<div class="nmb1">1</div>
<div class="nmb1">2</div>
<div class="nmb1">3</div>
<div class="nmb1">4</div>
<div class="nmb1">5</div>
<div class="nmb1">6</div>
<div class="nmb1">7</div>
<div class="nmb1">8</div>
<div class="nmb1">9</div>
<div class="nmb1">10</div>
<div class="nmb1">11</div>
<div class="nmb1">12</div>
<div class="nmb1">13</div>
<div class="nmb1">14</div>
<div class="nmb1">15</div>
<div class="nmb1">16</div>
<div class="nmb1">17</div>
<div class="nmb1">18</div>
<div class="nmb1">19</div>
<div class="nmb1">20</div>
</div>
<div class="color">
<p id="changeText"></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</div>
<div class="content">
<button id="about">Variant #<a id="clicks">0</a></button><br/>
<button id="btn"onClick="onClick()">NEXT</button>
</div>
<script type="text/javascript">
var textarea = ['N', 'Y'];
var colors=['red','green'];
$(document).ready(function(){
$('#btn').click(function(){
$('p').each(function(){
var randomC = Math.floor(Math.random()*colors.length);
$(this).css('background',colors[randomC]);
$(this).html(textarea[randomC]);
});
});
});
var clicks=0;
function onClick(){
clicks+=1;
document.getElementById("clicks").innerHTML=clicks;
};
</script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire