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

Question

在 Javascript 方面需要一些帮助。

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

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

问题:无法弄清楚如何将其用于颜色组合，但不是像下面的代码示例中那样的 1 颜色。

例子:

• Pallet-1:红、蓝、绿
• Pallet-2:黄色、青色、橙色

• Pallet-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>