Jquery 2个div上的随机预定义背景色和文本颜色_Jquery_Css_Background Color

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

jquery css

Jquery 2个div上的随机预定义背景色和文本颜色,jquery,css,background-color,Jquery,Css,Background Color,我希望创建一个Jquery脚本，从10个列表中随机选择一种颜色，然后将其作为背景色应用于一个div和一个h1标记的颜色到目前为止，我有一个随机颜色： $(document).ready(function() { var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ','

我希望创建一个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]);});

我想你要做的是：

假设您有如下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]);
});

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

最后通过调用

$（'h1'）.css（“color”，colors[rand]）

您将在页面上的所有H1元素上设置颜色，您希望它是特定的，在H1上设置一个ID或class值，然后使用

$（'H1.myclass'）.css（“color”，colors[rand]）

或

$（'#ID_代表_my_H1'）.css（“颜色”，颜色[rand]）
。随机颜色{
显示：块；
边缘底部：10px；
宽度：150px；
颜色：#CC00CC；
}
var randomLinks=$（'a.random-color'）；
var original=randomLinks.css（'color'）；
变量颜色=[“#中交”、“#333333”、“#990099”、“#1295A6”、“#FFFF99”]；
hover（函数（）{//mouseover
var col=Math.floor（Math.random（）*colors.length）；
$（this.css（'color'，colors[col]）；
$（此）。设置动画({
“paddingLeft”：“20px”
}, 1000);
}，函数（）{//mouseout
$（this.css（'color'，original）；
$（此）。设置动画({
“paddingLeft”：“0”
}, 500);
});

使用链接尝试此操作可能会有所帮助：


下面是代码的JS，概述了我使用的方法！
JS:

虽然这篇文章有点老，但它可能在这个问题的背景下有一些用处 非常感谢，这也是我得到的答案。非常感谢你的帮助！
var array = ["orange", "blue", "black", "yellow", "green"];
var colorNumber = Math.round((Math.random() * (array.length - 1)));
$("body").css('background-color', array[colorNumber]);

.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);
});

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);

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