Question

如何使这段代码不重复组合，在完成组合后，我应该警告它已经完成。

第二个问题，有没有办法重置组合（重置随机）？

提前致谢。

<!DOCTYPE html>
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></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>

Answer 1

根据上面提到的所需行为，请查看此代码段。它将随机化第一组，然后简单地切换它们，使它们永远不会与之前的组中的它们相同。

var textarea = ['N', 'Y'];
var colors = ['red', 'green'];
$(document).ready(function() {

  $('#btn').one('click', function() {
    $('p').each(function() {
      var randomC = Math.floor(Math.random() * colors.length);
      $(this).css('background', colors[randomC]);
      $(this).html(textarea[randomC]);
    });
    $('#btn').click(function(e) {
      $('p').each(function() {
        var isY = $(this).html() == textarea[0];
        $(this).css('background', isY ? colors[1] : colors[0]);
        $(this).html(isY ? textarea[1] : textarea[0]);
      });
    });
  });

});

var clicks = 0;

function onClick() {
  clicks += 1;
  document.getElementById("clicks").innerHTML = clicks;
};

.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<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">
</script>

不要重复math.random（）的组合

1 个答案: