我将如何阻止随机颜色随机选择两次相同的颜色[重复]答案

【问题标题】：How would I stop an random colour randomise from picking the same colour twice [duplicate]我将如何阻止随机颜色随机选择两次相同的颜色[重复]
【发布时间】：2022-01-16 18:50:21
【问题描述】：

<script>
      function randomColour(){
        var colour=[];
        colour[0]= '#edf2fb';
        colour[1]= '#d7e3fc';
        colour[3]= '#c1d3fe';
        colour[4]= '#d1d1d1';
        colour[5]= '#e1dbd6';
        colour[6]= '#e2e2e2';
        colour[7]= '#f9f6f2';
        colour[8]='#ffc09f';
        colour[9]='#ffee93';
        colour[10]='#fcf5c7';
        colour[11]='#a0ced9';
        colour[12]='#adf7b6';
        colour[13]='#809bce';
        colour[14]='#95b8d1';
        colour[15]='#b8e0d2';
        colour[16]='#d6eadf';
        colour[17]='#eac4d5';
        colour[18]='#e8d1c5';
        colour[19]='#eddcd2';
        colour[20]='#fff1e6';
        colour[21]='#f0efeb';
        colour[22]='#eeddd3';
        colour[23]='#e8dff5';
        colour[24]='#fce1e4';
        colour[25]='#fcf4dd';
        colour[26]='#ddedea';
        colour[27]='#daeaf6';
        colour[28]='#d3ab9e';
        colour[29]='#eac9c1';
        colour[30]='#ebd8d0';
        colour[31]='#ffe5ec';
        colour[32]='#ffc2d1';
        colour[33]='#ceb5b7';
        colour[35]='#b5d6d6';
        colour[36]='#f2f5ff';
        colour[37]='#efcfe3';
        colour[38]='#eaf2d7';
        colour[39]='#b3dee2';
        colour[40]='#f8ad9d';
        colour[41]='#fbc4ab';
        colour[42]='#ffdab9';
        colour[43]='#cdb4db';
        colour[44]='#ffc8dd';
        colour[45]='#ffafcc';
        colour[46]='#bde0fe';
        colour[47]='#a2d2ff';
        colour[48]='#fdffb6';
        colour[49]='#caffbf';
        colour[50]='#9bf6ff';
        colour[51]='#a0c4ff';
        colour[52]='#ffc6ff';
        colour[53]='#a7bed3';
        colour[54]='#c6e2e9';
        colour[55]='#f1ffc4';
        colour[56]='#ffcaaf';
        colour[57]='#dab894';
        colour[58]='#fec7bc';
        colour[59]='#fcf5ee';
        var pick= Math.floor(Math.random()*60);
        var test = document.getElementById("colorpad");
        test.style.backgroundColor = colour[pick];
        return colour[pick];


      }
    </script>

我想知道我如何能够阻止这个随机颜色选择器两次选择相同的颜色，因为当我希望它选择另一种随机颜色时它正在这样做。我不知道为什么会发生这种情况，我应该在我的代码中实现什么来阻止这种情况发生。

【问题讨论】：

这能回答你的问题吗？ How can I remove a specific item from an array?
作为提示，要每次获取新颜色，您需要将当前背景颜色与新颜色进行比较。如果它们相同，则需要重新选择。但是您需要考虑一个事实，即根据定义，随机可能导致您选择相同的颜色，10、20、20000 或 10e15 次。这对你来说是随机的！
@Kailau05 您能否澄清一下您是否只想防止同一颜色被连续选择两次，还是在程序期间？例如，red-blue-red-blue-red 是有效的输出吗？
@MattDunn 我只想防止相同的颜色被选中两次，例如红色，红色我不希望这种情况发生。
如果您找到了有效的答案，请将其标记为正确的。

标签： javascript html arrays random constants

【解决方案1】：

您必须维护另一个列表，我们称之为：“already_picked”。如果您选择带有“pick”编号的颜色，则必须将该编号放入此“already_picked”列表中。在选择另一种颜色之前，您必须检查所选数字当前是否在此列表中，如果是，请选择其他颜色。

【讨论】：

这仅在期望的行为是防止在程序期间两次选择相同的颜色时才有效。我的假设是 OP 只是希望连续两次选择相同的颜色。

【解决方案2】：

<html>
  <head>
    <script>
      var usedColors = [];
    
      function randomColour(){
        var colour=[];
        colour[0]= '#edf2fb';
        colour[1]= '#d7e3fc';
        colour[3]= '#c1d3fe';
        colour[4]= '#d1d1d1';
        colour[5]= '#e1dbd6';
        colour[6]= '#e2e2e2';
        colour[7]= '#f9f6f2';
        colour[8]='#ffc09f';
        colour[9]='#ffee93';
        colour[10]='#fcf5c7';
        colour[11]='#a0ced9';
        colour[12]='#adf7b6';
        colour[13]='#809bce';
        colour[14]='#95b8d1';
        colour[15]='#b8e0d2';
        colour[16]='#d6eadf';
        colour[17]='#eac4d5';
        colour[18]='#e8d1c5';
        colour[19]='#eddcd2';
        colour[20]='#fff1e6';
        colour[21]='#f0efeb';
        colour[22]='#eeddd3';
        colour[23]='#e8dff5';
        colour[24]='#fce1e4';
        colour[25]='#fcf4dd';
        colour[26]='#ddedea';
        colour[27]='#daeaf6';
        colour[28]='#d3ab9e';
        colour[29]='#eac9c1';
        colour[30]='#ebd8d0';
        colour[31]='#ffe5ec';
        colour[32]='#ffc2d1';
        colour[33]='#ceb5b7';
        colour[35]='#b5d6d6';
        colour[36]='#f2f5ff';
        colour[37]='#efcfe3';
        colour[38]='#eaf2d7';
        colour[39]='#b3dee2';
        colour[40]='#f8ad9d';
        colour[41]='#fbc4ab';
        colour[42]='#ffdab9';
        colour[43]='#cdb4db';
        colour[44]='#ffc8dd';
        colour[45]='#ffafcc';
        colour[46]='#bde0fe';
        colour[47]='#a2d2ff';
        colour[48]='#fdffb6';
        colour[49]='#caffbf';
        colour[50]='#9bf6ff';
        colour[51]='#a0c4ff';
        colour[52]='#ffc6ff';
        colour[53]='#a7bed3';
        colour[54]='#c6e2e9';
        colour[55]='#f1ffc4';
        colour[56]='#ffcaaf';
        colour[57]='#dab894';
        colour[58]='#fec7bc';
        colour[59]='#fcf5ee';
        var pick= Math.floor(Math.random()*60);
        if(usedColors.includes(pick)){
          randomColour();
        }
        usedColors.push(pick);
        document.getElementById("colorpad").style.backgroundColor = colour[pick];
        console.log(usedColors);

      }
    </script>
  </head>
  
  <body>
    <div id="colorpad" style="height: 300px; width: 300px;">
      <button onclick="randomColour()">btn</button>
    </div>  
  </body>
</html>

您需要添加一个变量来记住使用的颜色。我使用array 这样做。

【讨论】：

这将如何在 A 框中而不是全屏中实现。我用

在我的coden-p中改变了它
感谢您的帮助，当我单击随机按钮 60 次时，没有任何颜色显示。然后我将如何重新启动该过程？
您可以通过像这样清除数组usedColors = [] 来重新启动它。
如果数组已经清空了怎么办？我需要实现一个可以重复该过程的循环吗？

【解决方案3】：

var colour = [];
colour[0] = '#edf2fb';
colour[1] = '#d7e3fc';
colour[2] = '#d7e3f3';
colour[3] = '#c1d3fe';
colour[4] = '#d1d1d1';
colour[5] = '#e1dbd6';
colour[6] = '#e2e2e2';
colour[7] = '#f9f6f2';
colour[8] = '#ffc09f';
colour[9] = '#ffee93';
colour[10] = '#fcf5c7';
colour[11] = '#a0ced9';
colour[12] = '#adf7b6';
colour[13] = '#809bce';
colour[14] = '#95b8d1';
colour[15] = '#b8e0d2';
colour[16] = '#d6eadf';
colour[17] = '#eac4d5';
colour[18] = '#e8d1c5';
colour[19] = '#eddcd2';
colour[20] = '#fff1e6';
colour[21] = '#f0efeb';
colour[22] = '#eeddd3';
colour[23] = '#e8dff5';
colour[24] = '#fce1e4';
colour[25] = '#fcf4dd';
colour[26] = '#ddedea';
colour[27] = '#daeaf6';
colour[28] = '#d3ab9e';
colour[29] = '#eac9c1';
colour[30] = '#ebd8d0';
colour[31] = '#ffe5ec';
colour[32] = '#ffc2d1';
colour[33] = '#ceb5b7';
colour[34] = '#ceb5b8';
colour[35] = '#b5d6d6';
colour[36] = '#f2f5ff';
colour[37] = '#efcfe3';
colour[38] = '#eaf2d7';
colour[39] = '#b3dee2';
colour[40] = '#f8ad9d';
colour[41] = '#fbc4ab';
colour[42] = '#ffdab9';
colour[43] = '#cdb4db';
colour[44] = '#ffc8dd';
colour[45] = '#ffafcc';
colour[46] = '#bde0fe';
colour[47] = '#a2d2ff';
colour[48] = '#fdffb6';
colour[49] = '#caffbf';
colour[50] = '#9bf6ff';
colour[51] = '#a0c4ff';
colour[52] = '#ffc6ff';
colour[53] = '#a7bed3';
colour[54] = '#c6e2e9';
colour[55] = '#f1ffc4';
colour[56] = '#ffcaaf';
colour[57] = '#dab894';
colour[58] = '#fec7bc';
colour[59] = '#fcf5ee';

function randomColour() {
    
    if(colour.length > 0){   
        // Get random based on current size of the array
        var pick = Math.floor(Math.random() * colour.length);
        
        var pickedColour = colour[pick];
    
        // remove the colour which was picked.
        colour.splice(pick, 1);

        return pickedColour;
    }
    else{
        // Handle error here or reset the array to original 
        console.log("No color");
        return "#FFFFFF"
    }

}

// To test
for ( let i = 0; i < colour.length; i++){
    console.log(randomColour());
}

【讨论】：