JavaScript颜色数组

Question

我看了一段codecademy视频，无法随机化我的颜色数组。颜色不是随机的。我不确定我做错了什么。

function getRandomColor() {
var color;
var colorArray = [
"#FF6633",
"#FFB399",
"#FF33FF",
"#FFFF99",
"#00B3E6",
"#E6B333",
"#3366E6",
"#999966",
"#809980",
"#E6FF80",
"#1AFF33",
"#999933",
"#FF3380",
"#CCCC00",
"#66E64D",
"#4D80CC",
"#FF4D4D",
"#99E6E6",
"#6666FF"
];
for (var i = 0; i < colorArray; i++) {
color = colorArray[Math.floor(Math.random() * colorArray.length)];
}
return color;
}

Answer 1

我不知道为什么需要for循环，但我确信它是错误的。

问题出在哪里

在您的情况下，循环将不会执行，因为colorArray(在条件中(不是一个数字。您可能希望使用colorArray.length，但在这种情况下循环也没有意义。

随机选择一种颜色

如果您只想选择一种颜色，您可以将整个循环(以及return语句(替换为：

return colorArray[Math.floor(Math.random() * colorArray.length)];

这只会返回一个随机的颜色。

洗牌

如果你想打乱整个阵列，你可以使用以下循环：

for (var i = 0; i < colorArray.length; i++) {
let r=Math.floor(Math.random() * colorArray.length);
color = colorArray[r];
colorArray[r]=colorArray[i];
colorArray[i]=color;
}

Answer 2

将length添加到循环for (var i = 0; i < colorArray.length; i++)

function getRandomColor() {
var color;
var colorArray = [
"#FF6633",
"#FFB399",
"#FF33FF",
"#FFFF99",
"#00B3E6",
"#E6B333",
"#3366E6",
"#999966",
"#809980",
"#E6FF80",
"#1AFF33",
"#999933",
"#FF3380",
"#CCCC00",
"#66E64D",
"#4D80CC",
"#FF4D4D",
"#99E6E6",
"#6666FF"
];
for (var i = 0; i < colorArray.length; i++) {
color = colorArray[Math.floor(Math.random() * colorArray.length)];
}
return color;
}

Answer 3

我想您忘记在for循环中加上".length"了。for(var i = 0; i < colorArray.length; i++)

Answer 4

如果您想打乱数组，可以使用以下函数：

var colorArray = ["#FF6633", "#FFB399", "#FF33FF", "#FFFF99", "#00B3E6", "#E6B333", "#3366E6", "#999966", "#809980", "#E6FF80", "#1AFF33", "#999933", "#FF3380", "#CCCC00", "#66E64D", "#4D80CC", "#FF4D4D", "#99E6E6", "#6666FF"];
function shuffleArray() {
colorArray.sort(function() {
return Math.random() - 0.5;
});
}
shuffleArray();
console.log(colorArray);

如果你只是想得到一个随机项目，你可以做：

var colorArray = ["#FF6633", "#FFB399", "#FF33FF", "#FFFF99", "#00B3E6", "#E6B333", "#3366E6", "#999966", "#809980", "#E6FF80", "#1AFF33", "#999933", "#FF3380", "#CCCC00", "#66E64D", "#4D80CC", "#FF4D4D", "#99E6E6", "#6666FF"];
function getRandomColor() {
return colorArray[Math.random() * colorArray.length | 0];
}
console.log(getRandomColor());

Answer 5

您可以创建一个随机化的函数。

function randomizeArr () {
const randomLength=Math.floor(Math.random() * colorArr.length);
return colorArr[randomLength];
}

在for循环中，您的条件是错误的，应该是i < colorArr.length而不是colorArr。

一般来说，arr.length是属性，而不是像map()或reduce()等方法。

希望我的答案是明确的！

Answer 6

此程序通过按下按钮生成随机背景色。颜色是"；X11颜色"；来自CSS3规范WebColors。我手动将这些颜色加载到数组中，希望这对某些人来说是有用的信息。当然，你可能可以通过做一个webscrape来创建相同的数组。

const btn = document.querySelector('button');
var items = ['MediumVioletRed', 'DeepPink', 'PaleVioletRed', 'HotPink', 
'LightPink', 'Pink', 'DarkRed', 'Red', 'Firebrick', 'Crimson', 
'IndianRed', 'LightCoral', 'Salmon', 'DarkSalmon', 
'LightSalmon', 'OrangeRed', 'Tomato', 'DarkOrange', 'Coral', 
'Orange', 'DarkKhaki', 'Gold', 'Khaki', 'PeachPuff', 'Yellow', 
'PaleGoldenrod', 'Moccasin', 'PapayaWhip', 'LightGoldenrodYellow', 
'LemonChiffon', 'LightYellow','Maroon', 'Brown', 'SaddleBrown', 'Sienna', 
'Chocolate', 'DarkGoldenrod', 'Peru', 'RosyBrown', 'Goldenrod', 
'SandyBrown', 'Tan', 'Burlywood', 'Wheat', 'NavajoWhite', 'Bisque', 
'BlanchedAlmond', 'Cornsilk','DarkGreen', 'Green', 'DarkOliveGreen', 
'ForestGreen', 'SeaGreen', 'Olive', 'OliveDrab', 'MediumSeaGreen', 
'LimeGreen', 'Lime', 'SpringGreen', 'MediumSpringGreen', 'DarkSeaGreen', 
'MediumAquamarine', 'YellowGreen', 'LawnGreen', 'Chartreuse', 'LightGreen', 
'GreenYellow', 'PaleGreen', 'Teal', 'DarkCyan', 'LightSeaGreen', 
'CadelBlue', 'DarkTurquoise', 'MediumTurquoise', 'Turquoise', 'Aqua', 
'Cyan', 'AquaMarine', 'PaleTurquoise', 'LightCyan', 'Navy', 'DarkBlue', 
'MediumBlue', 'Blue', 'MidnightBlue', 'RoyalBlue', 'SteelBlue', 
'DodgerBlue', 'DeepSkyBlue', 'CornFlowerBlue', 'SkyBlue', 'LightSkyBlue', 
'LightSteelBlue', 'LightBlue', 'PowderBlue', 'Indigo', 'Purple', 
'DarkMagenta', 'DarkViolet', 'DarkSlateBlue', 'BlueViolet', 'DarkOrchid', 
'Fuchsia', 'Magenta', 'SlateBlue', 'MediumSlateBlue', 
'MediumOrchid', 'MediumPurple', 'Orchid', 'Violet', 'Plum', 
'Thistle', 'Lavender', 'MistyRose', 'AntiqueWhite', 'Linen', 
'Beige', 'WhiteSmoke', 'LavenderBlush', 'OldLace', 'AliceBlue', 
'Seashell', 'GhostWhite', 'Honeydew', 'ForalWhite', 'Azure', 
'MintCream', 'Snow', 'Ivory', 'White', 'Black', 'DarkSlateGray', 
'DimGray', 'SlateGrey', 'Gray', 'LightSlateGray', 'DarkGray', 
'Silver', 'LightGray', 'Gainsboro'];
function random_item(items)
{

return items[Math.floor(Math.random()*items.length)];

}

btn.addEventListener('click', () => {
const rndWebCol = (random_item(items));
document.body.style.backgroundColor = rndWebCol;

console.log(rndWebCol);

});