阵列中的随机颜色
Random Color From Array
我想用JavaScript构建一些东西,从给定的十六进制颜色数组中选择一个随机值(背景色),并将其应用于给定的div元素。
有人知道这样做的好方法吗?似乎没有什么对我有用,但我并不是一个真正懂JS的人。
这个怎么样?
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)]);
});
这个例子从任何数组中返回一个随机项,如果传递一个非false参数,它将从数组中删除该项。
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());
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)
不确定这在性能方面有多好,但如果您已经在使用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)
相关文章:
- 如何使用D3生成特定范围内的随机颜色
- 如何获得随机灯光颜色
- 单击时将文本的颜色更改为随机颜色(按钮)
- 使用JS将页面中的每个字母设置为随机颜色.为什么在页面的每个打开标记之前总是有一组额外的span标记
- 我怎样才能随机化 HTML 元素的颜色属性
- 文本颜色的随机色调不起作用
- 令人愉快的调色板随机颜色生成
- 显示所选随机颜色的十六进制
- 使用Javascript对RGBA颜色进行光标控制的形状随机化
- 随机bg颜色,每次刷新都会更改
- 每次单击按钮时随机选择颜色
- JavaScript 创建一个随机表生成器并为单元格分配颜色
- 使用jquery将文本更改为伪随机颜色
- 用于生成具有随机颜色的 CSS 属性的脚本
- 随机化网页上的图像和颜色对
- 使用 javascript 随机更改表的背景颜色
- 悬停时查询颜色随机化
- javascript颜色随机化器不起作用
- 颜色随机连接线
- 我如何改变背景颜色随机与Javascript