2 个 div 上的随机预定义背景颜色和文本颜色答案

【问题标题】：Random predefined background color and text color on 2 divs2 个 div 上的随机预定义背景颜色和文本颜色
【发布时间】：2011-08-19 08:20:30
【问题描述】：

我希望创建一个 Jquery 脚本，该脚本将从 10 个列表中随机选择一种颜色，然后将其作为背景颜色应用到一个 div 和 h1 标签的颜色。

到目前为止，我有一个随机颜色：

$(document).ready(function() { var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ','
                 + (Math.floor((256-199)*Math.random()) + 200) + ','
                 + (Math.floor((256-199)*Math.random()) + 200) + ')';
$('#controls-wrapper').css("background-color", hue);
$('h1').css("color", hue);});

但是我怎样才能从 10 种颜色的列表中随机选择呢？我找到了这个，但不确定如何将它应用于 bg color div 和 h1 标签。

$("#controls-wrapper").each(function(){ 
var colors = ["#CCCCCC","#333333","#990099"]; 
var rand = Math.floor(Math.random()*colors.length); 
$(this).css("background-color", colors[rand]);});

【问题讨论】：

标签： jquery css background-color

【解决方案1】：

我认为你想要完成的是：

假设你有一个这样的 HTML 页面：

<html>
<body>
  <h1>Hello World!</h1>
  <div id="controls-wrapper>some text</div>
</body>

$(document).ready(function(){
  var colors = ["#CCCCCC","#333333","#990099"];                
  var rand = Math.floor(Math.random()*colors.length);           
  $('#controls-wrapper').css("background-color", colors[rand]);
  $('h1').css("color", colors[rand]);
});

创建完颜色数组后，您会得到一个与颜色索引相对应的随机数。

现在您有了一个随机索引，您可以使用它来设置对象的背景颜色或文本颜色。

如果您希望每种颜色都不同，那么您只需调用

rand = Math.floor(Math.random()*colors.length);

在设置下一个元素的颜色之前再次设置。

最后通过调用$('h1').css("color", colors[rand]);，您将设置页面上所有H1元素的颜色，您希望它在H1上具体设置一个ID或类值，然后使用$('h1.myclass').css("color", colors[rand]);或$('#ID_for_my_H1').css("color", colors[rand]);

【讨论】：

非常感谢，这也是我得到的相同答案。非常感谢您的帮助！

【解决方案2】：

这可能会有所帮助：
Changing colors of a DIV

这是我使用的方法概述的代码 JS！ JS：

setInterval(function () { 
  document.getElementById("fancy").style.background= '#'+Math.floor(Math.random()*16777215).toString(16);
  document.body.style.background= '#'+Math.floor(Math.random()*16777215).toString(16); 
}, 1000);

虽然这篇文章有点旧，但在这个问题的背景下可能会有一些用处！

【讨论】：

【解决方案3】：

.random-color {
  display: block;
  margin-bottom: 10px;
  width: 150px;
  color:#CC00CC;
}
<a class="random-color" href="#">
  Link 1
</a>
<a class="random-color" href="#">
  Link 2
</a>
<a class="random-color" href="#">
  Link 3
</a>
<a class="random-color" href="#">
  Link 4
</a>
<a class="random-color" href="#">
  Link 5
</a>

var randomLinks = $('a.random-color');
var original = randomLinks.css('color');
var colors = ["#CCCCCC","#333333","#990099", "#1295A6", "#FFFF99"]; 
randomLinks.hover(function() { //mouseover
    var col = Math.floor(Math.random()*colors.length);
    $(this).css('color',colors[col]);
    $(this).animate({
        'paddingLeft': '20px'
    }, 1000);
}, function() { //mouseout
    $(this).css('color',original);
    $(this).animate({
        'paddingLeft': '0'
    }, 500);
});

使用链接http://codebins.com/codes/home/4ldqpby试试这个

【讨论】：

【解决方案4】：

var array = ["orange", "blue", "black", "yellow", "green"];
var colorNumber = Math.round((Math.random() * (array.length - 1)));
$("body").css('background-color', array[colorNumber]);

【讨论】：