从数组中随机选择颜色

Question

我想使用JavaScript构建一个能够从给定的十六进制颜色数组中随机选择一个值（背景颜色），并将其应用于给定的div元素的东西。

有人知道实现这个的好方法吗？目前没有什么方法适合我，但我并不是一个熟练的JS专业人士。

- Tomelower

---

你尝试过什么？(http://whathaveyoutried.com/) - Niet the Dark Absol

Answer 1

这个怎么样？

var rgb = [];

for(var i = 0; i < 3; i++)
    rgb.push(Math.floor(Math.random() * 255));

myDiv.style.backgroundColor = 'rgb('+ rgb.join(',') +')';

如果你想将其限制为已知的颜色，你可以创建一个颜色数组，并像这样随机选择。

var colors = ['red', 'green', 'blue', 'orange', 'yellow'];

myDiv.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];

JSFiddle

更新 - 使用第一种方法应用于所有的.post-content。

var divs = document.querySelectorAll('.post-content');

for(var i = 0; i < divs.length; i++)
    divs[i].style.backgroundColor = 'rgb('+ rgb.join(',') +')';

如果您想把随机背景应用于每个.post-content，可以按照以下方式操作。

var divs = document.querySelectorAll('.post-content');

for(var i = 0; i < divs.length; i++) {
    var rgb = [];

    for(var i = 0; i < 3; i++)
        rgb.push(Math.floor(Math.random() * 255));

    divs[i].style.backgroundColor = 'rgb('+ rgb.join(',') +')';
}

最近更新 - 如你所提到的，使用jQuery。

var colors = ['red', 'green', 'blue', 'orange', 'yellow'];

$('.post-content').each(function() {
    $(this).css('background-color', colors[Math.floor(Math.random() * colors.length)]);
});

- Austin Brunkhorst

---

每次我在你写的'myDiv'的地方加入破折号时，我都会遇到语法错误。 - Tomelower

这是因为您不能使用像“-”这样的特殊字符作为变量。您要选择哪个元素？ - Austin Brunkhorst

“.post-content”，我想要修改它，但是它在很多文件中都被使用了，我不想出现任何问题。 - Tomelower

有没有一种方法可以使用其他技术，以便我可以定义它选择的颜色，并将其应用于每个.post-content？ - Tomelower

好的。如果您正在使用jQuery，那么我已经对答案进行了另一次编辑，提供了更简单的解决方案。 - Austin Brunkhorst

Answer 2

这个示例会从任意数组中返回一个随机项，如果您传递了一个非假值参数，它将从数组中移除该项。

Array.prototype.getRandom= function(cut){
    var i= Math.floor(Math.random()*this.length);
    if(cut && i in this){
        return this.splice(i, 1)[0];
    }
    return this[i];
}

//示例：

var colors= ['aqua', 'black', 'blue', 'fuchsia', 'gray', 'green', 
'lime', 'maroon', 'navy', 'olive', 'orange', 'purple', 'red', 
'silver', 'teal', 'white', 'yellow'];

alert(colors.getRandom());

- kennebec

---

谢谢！我该如何将所选颜色设置为给定 div（即“.post-content”）的背景？ - Tomelower

您可以使用 document.getElementById("myDiv").style.backgroundColor = colors.getRandom(); 来设置背景颜色。如果要使用带连字符的 CSS 属性，只需要将下一个字母大写即可（例如：overflow-y 为 overflowY，font-size 则为 fontSize）。 - Radvylf Programs

Answer 3

let hue = 0;
    let colors = []
    for (let j = 0; j < 10; j++) {
        let color = "hsl(" + hue + ",100%,50%)"      
        colors.push(color)      
        hue += 500
    }
    console.log(colors)

- Md Ishaq

Answer 4

不确定性能如何，但如果您已经在使用lodash，那么它可以非常简单：

// initialising array of colours
let colours = ['tomato', 'salmon', 'plum', 'olive', 'lime', 'chocolate']

// getting a random colour
colours = _.shuffle(colours); // you can shuffle it once, or every time
let hereIsTheColour = colours.pop() // gets the last colour from the shuffled array (also removes it from the array)

- kiradotee