Javascript 如何给每个div一个随机的背景色？

我正在建立一个网站，我希望页面上的每个

div

都是下面选择的随机颜色。但是一旦我运行代码，每个div都是相同的颜色。我哪里做错了

 $(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);
 });

---

您的代码完全按照预期工作，假设您有：

• 正确包含jQuery
• 至少有一个元素的

  类
  为
  颜色div

如果代码不起作用，那么问题很可能是没有包含jQuery。确保使用以下内容引用它：

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

Text

您的代码对所有元素使用随机颜色。您需要为每个元素获取随机颜色。这意味着迭代

以下代码为每个元素获取随机颜色：

var colors = ['red','blue','green','yellow','cyan','orange'];
$('.color-div').css('background-color', function() {
    var i = Math.floor(Math.random()*colors.length);
    var color = colors[i];
    colors.splice(i, 1);
    return color;
}); 

---

上面的代码确保颜色只使用一次。如果可以使用两个或多个具有相同颜色的元素，则可以删除

colors.splice

行。另请注意，带有

拼接

语句的代码假定不超过6个

.color div

元素。

这里是一个解决方案，您可以循环所有

.color div

并设置“随机” 每种颜色

它使用这种方法

你的代码是对的。。。但只运行一次，并将颜色应用于所有元素

$（文档）.ready（函数（）{
变量颜色=[‘红色’、‘蓝色’、‘绿色’、‘黄色’、‘青色’、‘橙色’]；
$（'.color div'）。每个（函数（）{
var new_color=colors[Math.floor（Math.random（）*colors.length）]；
$（this.css（'background-color'，new_color）；
});
});  // 结束就绪

div{
高度：2米；
宽度：2米；
}

---

我会将@obsidiange和@louyspatricebesette答案组合成一个，然后像这样计算颜色，这样就不局限于您的列表

var r=Math.random（）*255；
var g=Math.random（）*255；
var b=Math.random（）*255；
var new_color='rgb（'+r+'，'g+'，'+b'）；

结果应该是这样的：

$(document).ready(function() {
   $('.color-div').each(function(){
      var r = Math.random() * 255;
      var g = Math.random() * 255;
      var b = Math.random() * 255;
      var new_color = 'rgb(' + r + ',' g + ',' + b ')';
      $(this).css('background-color',new_color);
   });
});

---

编辑，看看你说的“从选择中”。。。抱歉，无论如何，请将此代码留在这里，因为它可能对某些人有用。

使用纯香草JavaScript的方法：

您的部门：

<div class="colour-div"></div>
<div class="colour-div"></div>
<div class="colour-div"></div>
<div class="colour-div"></div>
<div class="colour-div"></div>

而JS：

var colours = ['red','blue','green','yellow','cyan','orange'];
var divs = document.getElementsByClassName("colour-div");

function generateRandomColors() {
    var i;
    for (i = 0; i < divs.length; i++) {
        var newColor = Math.floor(Math.random()*colours.length)
        divs[i].style.backgroundColor = colours[newColor];
    }
}

var colors=[‘红色’、‘蓝色’、‘绿色’、‘黄色’、‘青色’、‘橙色’]；
var divs=document.getElementsByClassName（“color div”）；
函数生成器颜色（）{
var i；
对于（i=0；i

如果您：
-将任意数量的div添加到

颜色div

类

---

-在

颜色[]

中加入任意数量的颜色，但每个div都是相同的颜色，我希望每个div都是vairety的随机颜色（例如第一个div红色、第二个div蓝色、第三个div红色）。@WebStudent-我的道歉；起初我误解了这个问题。我已经更新了我的答案，以展示每个答案的不同之处。您可能需要点击

运行代码片段

几次来展示随机性：）您可能会对更宽的随机颜色生成器感兴趣：您希望每个div都有不同的颜色？@WebStudent非常欢迎！下面是上面代码的JSFIDLE:mmm。。。使用+1真的很酷（一个片段在视觉上会很有趣）