jQuery 2 个 div 上的随机预定义背景颜色和文本颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5897573/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Random predefined background color and text color on 2 divs
提问by Hue
I am looking to create a Jquery script that will randomly choose a colour from a list of 10, and then apply it as a background color to one div, and the color of a h1 tag.
我希望创建一个 Jquery 脚本，该脚本将从 10 个列表中随机选择一种颜色，然后将其作为背景颜色应用于一个 div，以及 h1 标签的颜色。
So far I have this which makes a random color:
到目前为止，我有一个随机颜色：
$(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);});
but how can I make this choose randomly from a list of 10 colors? I found this, but not sure how you would apply this to bg color div and h1 tag.
但是我怎样才能让这个从 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]);});
回答by gruntled
I think what you are trying to accomplish is this:
我认为你想要完成的是：
Assuming you have a HTML page like this:
假设你有一个这样的 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]);
});
After you have created your colors array you then get a random number corresponding to the index of a color.
创建颜色数组后，您将获得一个与颜色索引相对应的随机数。
Now that you have a random index you can use it to set the background-color, or text color of an object.
现在您有了一个随机索引，您可以使用它来设置对象的背景颜色或文本颜色。
If you wanted the colors to be different for each then you would just call
如果您希望每个颜色都不同，那么您只需调用
rand = Math.floor(Math.random()*colors.length);
again before setting the color of your next element.
在设置下一个元素的颜色之前再次。
And finally by calling $('h1').css("color", colors[rand]);you will set the color on all H1 elements on the page, you want it to be specific set an ID or class value on the H1 and then use $('h1.myclass').css("color", colors[rand]);OR $('#ID_for_my_H1').css("color", colors[rand]);
最后通过调用$('h1').css("color", colors[rand]);您将在页面上的所有 H1 元素上设置颜色，您希望它是特定的，在 H1 上设置一个 ID 或类值，然后使用$('h1.myclass').css("color", colors[rand]);OR$('#ID_for_my_H1').css("color", colors[rand]);
回答by Tushar Shukla
May be this can help:
Changing colors of a DIV
可能这会有所帮助：
更改 DIV 的颜色
Here is the JS of the code for an overview of approach that i used!
JS:
这是我使用的方法概述的代码 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);
Though this post is little old but it may be of some use in context of this question!!
虽然这篇文章有点旧，但在这个问题的上下文中可能会有一些用处！！
回答by user8827122
var array = ["orange", "blue", "black", "yellow", "green"];
var colorNumber = Math.round((Math.random() * (array.length - 1)));
$("body").css('background-color', array[colorNumber]);
回答by gaurang171
.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);
});
Try this using link http://codebins.com/codes/home/4ldqpby
