我正在制作一个随机颜色生成器。我想通过在字段中设置它们的百分比来增加百分比或机会来获得某种颜色。 （例如，用户将蓝色设置为有50％的机会生成）我可以这样做吗？如果有更简单/更有效的方式来编写此代码，请告诉我。我对编码很新，但想挑战自己。
我想知道如何设置，例如。 50％，一个颜色，但不知道如何在一个数组中做到这一点，因为我的数组中只有0-9索引。请帮助：）
var colors = ["Red", "Yellow", "Blue", "Green", "Orange", "Purple", "Pink", "Black", "White", "Violet"];
$(document).ready(function(){
$('#spin-btn').click(function(){
var output = colors.length;
var randomNumber = Math.floor(Math.random()*output);
for(i=0;i<=output;i+=1){
var newColor = colors[randomNumber];
console.log(newColor);
if(newColor === "Red"){
$('#red').show();
} else {
$('#red').hide();
}
if(newColor === "Yellow"){
$('#yellow').show();
} else {
$('#yellow').hide();
}
if(newColor === "Blue"){
$('#blue').show();
} else {
$('#blue').hide();
}
if(newColor === "Green"){
$('#green').show();
} else {
$('#green').hide();
}
if(newColor === "Orange"){
$('#orange').show();
} else {
$('#orange').hide();
}
if(newColor === "Purple"){
$('#purple').show();
} else {
$('#purple').hide();
}
if(newColor === "Pink"){
$('#pink').show();
} else {
$('#pink').hide();
}
if(newColor === "Black"){
$('#black').show();
} else {
$('#black').hide();
}
if(newColor === "White"){
$('#white').show();
} else {
$('#white').hide();
}
if(newColor === "Violet"){
$('#violet').show();
} else {
$('#violet').hide();
}
break;
}
答案 0 :(得分：3)
var colors = [
"Blue","Blue", "Blue", "Blue", "Blue", "Blue", "Blue", "Blue" , "Blue"
"Red","Yellow", "Green", "Orange", "Purple", "Pink", "Black", "White", "Violet"
];
function generateColor() {
var colorsAmount = colors.length;
var randIndex = Math.floor(Math.random() * colorsAmount);
return colors[randIndex];
}
在colors数组中，你重复元素以增加被选中的概率。
现在有9个元素，其值为“蓝色”，其余的都重复一次。
所以18个概率中有9个选择蓝色（50％），所有其他颜色1个18个（5.55 ..％）
答案 1 :(得分：0)
代码改进
就代码而言，这是一种减少所有这些线路的快捷方法。如果你有这样的代码（有这么多if-else你必须先问自己的是......如果明天你给阵列添加新的颜色会怎么样？如果你添加100种颜色怎么办？那么你＆＃ 39; d需要100多个if-else个案例。绝对的噩梦，对吧？所以让我们想办法解决这个问题。
请记住，编码就是你想要的，你设置规则和魔法。它很漂亮。那么，您如何使用colors中的信息以免重复自己？
第一步
将CSS规则添加到要显示颜色的框中。 CSS规则将匹配变量colors中的颜色名称，因此您可以快速add/remove CSS类。
对于代码片段，我删除了各种颜色，以免写出如此多的CSS规则。当你改进一些时，查看精彩的SASS，它就是这种例子的完美之选。
第2步
删除所有这些if/else语句和for loop并使用您的jQuery库获取所有内容，例如函数addClass()和removeClass()。所以你真正想要做的是将一个HTML元素作为随机颜色的目标，并根据生成的随机颜色对其进行分类。 CSS类将负责输出生成的适当颜色。
在JS代码中，您所要做的就是获取随机颜色，然后清除随机颜色的HTML元素目标，然后添加生成的颜色。 （抱歉这么长的措辞）。
此改进的代码段：
var colors = ["red", "yellow", "blue", "green"];
$(document).ready(function() {
$('#spin-btn').click(function() {
var output = colors.length,
randomNumber = Math.floor(Math.random() * output),
color_container = $('#color-output');
var color = colors[randomNumber];
color_container.removeClass(); //Cleanup previous color classes
color_container.addClass(color);
});
});#spin-btn {
padding: 20px;
margin-bottom: 10px;
background-color: #eee;
cursor: pointer;
}
#color-output {
width: 100px;
height: 100px;
}
.default { background: gray; }
.blue { background: blue;}
.yellow { background: yellow;}
.red { background: red; }
.green { background: green;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="spin-btn">Generate random color</div>
<div id="color-output" class="default"></div>
因此，如果明天您添加了100种新颜色，那么您只需更新colors变量，然后添加相关的CSS类。您的实际JS代码将不更改。耶！ （唐＆＃39; T-重复自己动手）。
增加代码改进的可能性
就概率而言，让用户选择最有可能出现的颜色时，我的答案基于用户this link提供的Rory对原始问题的评论。
您必须动态操作colors变量，以包含更多/更少用户想要出现的颜色。
您可以从默认数组colors开始，然后将其传递给添加用户所选颜色的函数，然后根据操作的colors数组选择随机颜色。
为此，我添加了以下功能（可以大大改进更具动态性，这只是开始的一个垫脚石，我将改进留给您） 。
function getColors() {
var blue_prob = $('#blue-prob').val(), //These are your inputs
red_prob = $('#red-prob').val();
var colors = ["red", "yellow", "blue"]; // default colors
addProbability(colors, blue_prob - 1, "blue"); //blue_prob - 1 because "blue" already appears once
addProbability(colors, red_prob - 1, "red"); //red_prob - 1 because "red" already appears once
return colors;
}
function addProbability(colors, probability, color) {
for (let i = 0; i < probability; ++i)
colors.push(color);
}
此部分的代码段：
最好以全屏模式运行，因为console output会很快填满它。因此，尝试输入，默认值为2为蓝色，1为红色，将使蓝色出现两次，红色出现一次。
$(document).ready(function() {
$('#spin-btn').click(function() {
var colors = getColors();
var output = colors.length,
randomNumber = Math.floor(Math.random() * output),
color_container = $('#color-output');
console.log(colors);
var color = colors[randomNumber];
color_container.removeClass(); //Cleanup previous color classes
color_container.addClass(color);
});
});
function getColors() {
var blue_prob = $('#blue-prob').val(),
red_prob = $('#red-prob').val();
var colors = ["red", "yellow", "blue"]; // default colors
addProbability(colors, blue_prob - 1, "blue"); //blue_prob - 1 because "blue" already appears once
addProbability(colors, red_prob - 1, "red"); //red_prob - 1 because "blue" already appears once
return colors;
}
function addProbability(colors, probability, color) {
for (let i = 0; i < probability; ++i)
colors.push(color);
}#spin-btn {
padding: 20px;
margin-bottom: 10px;
background-color: #eee;
cursor: pointer;
}
#color-output {
width: 100px;
height: 100px;
}
.default {
background: gray;
}
.blue {
background: blue;
}
.yellow {
background: yellow;
}
.red {
background: red;
}
.green {
background: green;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="spin-btn">Generate random color</div>
<div id="color-output" class="default"></div>
<span>Blue probability</span><input id="blue-prob" value="2" /> <br>
<span>Red probability</span><input id="red-prob" value="1" /> <br>
根据现有代码构建的内容
添加色彩饱和度百分比
这里SASS将成为真正的魔法。好吧，你想要百分比太对了吗？那么只需扩展类名原则。你可以拥有一大堆CSS类，比如
.color-10 { opacity: 0.1; }
.color-20 { opacity: 0.2; }
.color-30 { opacity: 0.3; }
由于您没有使用SASS在CSS中写出来很麻烦。所以我建议改为inline-styles。因此，不要让CSS类给它opacity，而是使用jQuery来操纵它。这方面的诀窍是将body background放在白色上。或者你的颜色会受到影响。
编辑:(解释为什么我选择不透明度作为实现颜色变化的简单方法）
不透明度是使用颜色的百分比。不透明度会更改元素的不透明度。换句话说，元素的透明度。它不是最合适的方式，但很简单。因此，如果您将矩形设置为红色，则将其设置为50％透明，红色将显示为“粉红色”＃34; ，就像你去饱和它一样。为了使这种方式起作用，元素的背景必须是白色，或者当您设置元素的不透明度时，颜色将改变其色调。
简单的代码段：
var colors = ["red", "yellow", "blue", "green"];
$(document).ready(function() {
$('#spin-btn').click(function() {
var output = colors.length,
randomNumber = Math.floor(Math.random() * output),
color_container = $('#color-output');
var color = colors[randomNumber],
percentage = getPercentage();
console.log(color, percentage);
color_container.removeClass(); //Cleanup previous color classes
color_container.addClass(color);
color_container.css({
'opacity': percentage
});
});
function getPercentage() {
return Math.random(); //Work on this, I just spat it out in 5 seconds. Will NOT include 1, full opacity
}
});#spin-btn {
padding: 20px;
margin-bottom: 10px;
background-color: #eee;
cursor: pointer;
}
#color-output {
width: 100px;
height: 100px;
}
.default {
background: gray;
}
.blue {
background: blue;
}
.yellow {
background: yellow;
}
.red {
background: red;
}
.green {
background: green;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="spin-btn">Generate random color</div>
<div id="color-output" class="default"></div>
我要采用的方法是使用rgba()，它允许第四个参数包含颜色本身的不透明度。
.blue-40 {
background-color: rgba(0, 0, 255, 0.40);
}
但我会使用SASS来生成所有这些CSS规则。如果您没有使用SASS我确定您可以使用JS来确定如何获得rgba()颜色。
希望这有助于：）