Jquery：随机背景颜色

Question

我有以下背景颜色： #05668D, #028090, #00A896, #02C39A, #F0F3BD ... 当页面加载时，如何使用类abc的每个元素以其中一种顶部颜色具有不同的背景颜色（可以重复，随机）。

例如：

<div class="asd"><div class="abc">...</div></div>
<div class="asd"><div class="abc">...</div></div>
<div class="asd"><div class="abc">...</div></div>
<div class="asd"><div class="abc">...</div></div>
<div class="asd"><div class="abc">...</div></div>

结果：

<div class="asd"><div class="abc" style="background-color:#05668D">...</div></div>
<div class="asd"><div class="abc" style="background-color:#00A896">...</div></div>
<div class="asd"><div class="abc" style="background-color:#028090">...</div></div>
<div class="asd"><div class="abc" style="background-color:#00A896">...</div></div>
<div class="asd"><div class="abc" style="background-color:#F0F3BD">...</div></div>
 ...

Answer 1

您可以使用下面的随机函数和jquery的每个函数将颜色应用于元素。

		$(function(){
  
  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  };
  var colors = ['#05668D', '#028090', '#00A896', '#02C39A', '#F0F3BD'];
  $('.abc').each(function(index,el){
    var randomColorIndex = getRandomInt(0,colors.length-1);
    $(el).css('background-color',colors[randomColorIndex]);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="asd"><div class="abc">...</div></div>
    <div class="asd"><div class="abc">...</div></div>
    <div class="asd"><div class="abc">...</div></div>
    <div class="asd"><div class="abc">...</div></div>
    <div class="asd"><div class="abc">...</div></div>

你可以在这里阅读：

jquery每个函数：

Javascript随机函数：https://api.jquery.com/each/

Answer 2

您必须迭代每个元素，然后为其指定background-color样式。

纯JavaScript版

var colorsArray = ['#05668D', '#028090', '#00A896', '#02C39A', '#F0F3BD'];
var divsArray = document.getElementsByClassName('abc');
var uniqueColorIndex = 0;

for(var i=0; i < divsArray.length; i++){
uniqueColorIndex = Math.floor(Math.random() * (colorsArray.length - 0 + 1));
  divsArray[i].style['background-color'] = colorsArray[uniqueColorIndex];
};

其中，colorsArray具有所有可能的颜色代码 uniqueColorIndex找到一个随机数的索引。 Source

链接到jsFiddle