堆栈内存溢出
  简体   繁体   English

我将如何阻止随机颜色随机选择两次相同的颜色

[英]How would I stop an random colour randomise from picking the same colour twice

 原文  2021-12-13 09:17:17  7   3    javascript/ html/ arrays/ random/ constants

问题描述

<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>

I would like to know on how I would be able to stop this random colour picker from choosing the same colour twice because it is currently doing this when I want it to pick another random colour.我想知道我如何能够阻止这个随机颜色选择器两次选择相同的颜色，因为当我希望它选择另一种随机颜色时它正在这样做。 I do not know why this is occurring, what should I implement into my code to stop this from occurring.我不知道为什么会发生这种情况，我应该在我的代码中实施什么来阻止这种情况发生。

3 个解决方案

解决方案1
 0  2021-12-13 09:22:15

You have to maintain another list, lets call it: "already_picked".您必须维护另一个列表，我们称之为：“already_picked”。 If you choose a color with the "pick" number, you have to put that number into this "already_picked" list.如果您选择带有“pick”编号的颜色，则必须将该编号放入此“already_picked”列表中。 Before you choose another colour, you have to check if the selected number is currently in this list, if so, pick other one.在选择另一种颜色之前，您必须检查所选数字当前是否在此列表中，如果是，请选择其他颜色。

解决方案2
 0  2021-12-13 09:34:34

 <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>

you need to add a varianble to remember the used Colors.您需要添加一个变量来记住使用过的 Colors。 I used an array to do so.我使用了一个array来做到这一点。

解决方案3
 0  2021-12-13 10:19:51

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());
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何随机化背景颜色和svg - How to randomise background colour and svg 如何为链接分配随机颜色？ - How do I assign a random colour to links? 数组中的随机十六进制颜色 - Random Hex colour from an array 您如何保持javascript中的Math.random（）避免多次选择相同的数字？ - How would you keep a Math.random() in javascript from picking the same numbers multiple times? 我将如何实现这种滚动背景颜色变化效果？ - How would I achieve this scroll background colour change effect? 如何在不连续两次具有相同的 output 的情况下从数组中随机化字符串 - How to randomise string from an array without having the same output twice in a row 如何为数组中的每个项目分配随机颜色？ - How to assign a random colour for each item in an array? 如何从量角器的颜色选择器窗口中选择颜色 - How to select colour from the colour picker window in protractor 随机数，随机颜色循环 - Random numbers, random colour loops 如何从html select对象中删除悬停颜色？ - How can I remove the hover colour from html select object?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM