Question

需要有关Javascript的帮助。

说明：有3种不同的颜色组合（托盘）。每个组合都有3种颜色。

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

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

示例：

托盘1：红色，蓝色，绿色
托盘2：黄色，青色，橙色
3号货盘：青色，橙色，蓝色
1. 脚本随机选择Pallet-2。
2. 将背景色更改为黄色，将字体颜色更改为青色，将边框颜色更改为橙色。

很抱歉，如果它太简单了，但是我花了一天时间，从列表中找到了只能选择一种颜色的随机颜色选择解决方案，但是不能使其与颜色组合一起使用。

谢谢。

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>

Fiddle

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>

从页面加载列表中选择随机颜色托盘

3 个答案: