Math.random 重復數字 JavaScript

Question

我想在兩個盒子里隨機分配一個班級。

但即使使用indexOf(randomIndex) === -1) Math.random indexOf(randomIndex) === -1)復制數字。

如果您刷新，您將看到這些框正在更改類，但有時它們都具有相同的類，這應該發生。

 var grid = document.getElementById("grid-box"); for (var i = 0; i <= 1; i++) { var square = document.createElement("div"); square.className = 'square'; square.id = 'square' + i; grid.appendChild(square); } var weaponTwo = []; while (weaponTwo.length < 1) { var randomIndex = parseInt(2 * Math.random()); if (weaponTwo.indexOf(randomIndex) === -1) { weaponTwo.push(randomIndex); var drawWtwo = document.getElementById('square' + randomIndex); $(drawWtwo).addClass("w2") } }; var weapon3 = []; while (weapon3.length < 1) { var randomIndex = parseInt(2 * Math.random()); if (weapon3.indexOf(randomIndex) === -1) { weapon3.push(randomIndex); var draw3 = document.getElementById('square' + randomIndex); $(draw3).addClass("w3") } };

 #grid-box { width: 420px; height: 220px; } #grid-box>div.square { font-size: 1rem; vertical-align: top; display: inline-block; width: 10%; height: 10%; box-sizing: border-box; border: 1px solid #000; } .w2 { background-color: red; } .w3 { background-color: blue; }

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <div id="grid-box"></div>

Answer 1

您正在使用兩個不同的數組來存儲武器。 使用相同的數組，以便數字不重復。

 var grid = document.getElementById("grid-box"); for (var i = 0; i <= 1; i++) { var square = document.createElement("div"); square.className = 'square'; square.id = 'square' + i; grid.appendChild(square); } var weaponTwo = []; while (weaponTwo.length < 1) { var randomIndex = parseInt(2 * Math.random()); if (weaponTwo.indexOf(randomIndex) === -1) { weaponTwo.push(randomIndex); var drawWtwo = document.getElementById('square' + randomIndex); $(drawWtwo).addClass("w2") } }; while (weaponTwo.length < 2) { var randomIndex = parseInt(2 * Math.random()); if (weaponTwo.indexOf(randomIndex) === -1) { weaponTwo.push(randomIndex); var draw3 = document.getElementById('square' + randomIndex); $(draw3).addClass("w3") } };

 #grid-box { width: 420px; height: 220px; } #grid-box>div.square { font-size: 1rem; vertical-align: top; display: inline-block; width: 10%; height: 10%; box-sizing: border-box; border: 1px solid #000; } .w2 { background-color: red; } .w3 { background-color: blue; }

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <div id="grid-box"></div>

更好的方法：您可以創建一個類數組，然后使用此算法對其進行混洗。 然后你可以從數組中彈出並一一添加到類中。