2个div上的随机预定义背景颜色和文本颜色 [英] Random predefined background color and text color on 2 divs
问题描述
我正在寻找创建一个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]);
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.
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.
$("#controls-wrapper").each(function(){
var colors = ["#CCCCCC","#333333","#990099"];
var rand = Math.floor(Math.random()*colors.length);
$(this).css("background-color", colors[rand]);});
I think what you are trying to accomplish is this:
Assuming you have a HTML page like this:
<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]);
这篇关于2个div上的随机预定义背景颜色和文本颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
