我想创建一个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]);
});
创建颜色数组后，您将获得与颜色索引对应的随机数。
现在您有了一个随机索引，您可以使用它来设置对象的背景颜色或文本颜色。
如果你想让每种颜色都不同，你就可以打电话
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]);
可能这可以帮助： 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);
虽然这个帖子有点旧，但它可能在这个问题的背景下有用！
.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);
});
var array = ["orange", "blue", "black", "yellow", "green"];
var colorNumber = Math.round((Math.random() * (array.length - 1)));
$("body").css('background-color', array[colorNumber]);