从页面加载的列表中选择随机调色板

Question

需要一些Javascript的帮助。

描述： 有 3 种不同的颜色组合(托盘(。每种组合都有 3 种颜色。

目标： 在页面加载时随机选择颜色组合并更改元素，例如：背景色、字体颜色、下划线颜色。

问题：无法弄清楚如何进行颜色组合，但不是像下面的代码示例中那样的 1 种颜色。

例：

• 托盘-1：红色、蓝色、绿色
• 托盘-2：黄色、青色、橙色

• 托盘-3：青色、橙色、蓝色

  1. 脚本随机选择托盘-2。
  将背景色更改为黄色，将字体颜色更改为
  2. 青色，将边框颜色更改为橙色。

抱歉，如果它太简单了，但我花了一天时间，找到了仅从列表中随机选择1种颜色的解决方案，但无法使其适用于颜色组合。

提前谢谢。

.JS：

$(document).ready(function(){ 
var colors = ['red','blue','green','yellow','cyan','orange'];
var new_color = colors[Math.floor(Math.random()*colors.length)];
$('#color-div').css('background-color',new_color);
});

.CSS：

#color-div{
border:1px solid gray;
width:50px;
height:50px;
}

.HTML：

<div id="container">
<div id="color-div">
</div>
</div>

小提琴

Answer 1

澄清后更新了答案(随机选择颜色集(：

$(document).ready(function() {
var palettes = [
['red', 'blue', 'green'],
['yellow', 'cyan', 'orange'],
['cyan', 'orange', 'blue']
];
var randomPalette = palettes[Math.floor(Math.random() * palettes.length)];

var new_bgcolor = randomPalette[0];
var new_textcolor = randomPalette[1];
var new_bordercolor = randomPalette[2];
$('#color-div').css({
'background-color': new_bgcolor,
'color': new_textcolor,
'border-color': new_bordercolor
});
});

#color-div {
border: 1px solid gray;
width: 50px;
height: 50px;
text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="color-div">
test
</div>
</div>

---

澄清前的旧答案(选择三种随机但独特的颜色(：

在选择下一个颜色之前，您必须从颜色数组中删除随机选择的颜色。您可以使用Array.prototype.splice().

由于文本下划线颜色没有 css 属性，因此我在此示例中更改了边框颜色。

$(document).ready(function() {
var colors = ['red', 'blue', 'green', 'yellow', 'cyan', 'orange'];
var new_bgcolor = colors.splice(Math.floor(Math.random() * colors.length), 1);
var new_textcolor = colors.splice(Math.floor(Math.random() * colors.length), 1);
var new_bordercolor = colors.splice(Math.floor(Math.random() * colors.length), 1);
$('#color-div').css({
'background-color': new_bgcolor,
'color': new_textcolor,
'border-color': new_bordercolor
});
});

#color-div {
border: 1px solid gray;
width: 50px;
height: 50px;
text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="color-div">
test
</div>
</div>

Answer 2

将保留它，以防万一有人想要没有jQuery的代码

window.onload = () => {
const palettes = [
["red", "blue", "green"],
["yellow", "cyan", "orange"],
["cyan", "orange", "blue"]
];
const randomPalette =
palettes[Math.floor(Math.random() * palettes.length)];
let bgColor = randomPalette[0];
let textColor = randomPalette[1];
let borderColor = randomPalette[2];
const div = document.getElementById("color-div").style;
div.backgroundColor = bgColor;
div.borderColor = borderColor;
div.color = textColor;
};

Answer 3

也许你可以做这样的事情：

var colors = ['red','blue','green','yellow','cyan','orange'];
var getRandomColor = () => colors[Math.floor(Math.random()*colors.length)];
var color1 = getRandomColor(); 
var color2 = getRandomColor());
var color3 = getRandomColor();
$(document).ready(function(){ 
$('#color-div-1').css('background-color', color1);
$('#color-div-2').css('background-color', color2);
// etc...
}

当然，您的HTML将包含这些新类：

<div id="container">
<div id="color-div-1" />
<div id="color-div-2" />
</div>