JQuery随机背景颜色和颜色，在2 div的

我期待创建一个Jquery脚本，它将从10列表中随机选择一种颜色，然后将其作为背景颜色应用于一个div，而颜色h1标签。JQuery随机背景颜色和颜色，在2 div的

到目前为止，我有这使得随机颜色：

$(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 tag。

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

来源

2011-05-05 Hue

我想你所要完成的是：

假设你有一个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]); OR $('#ID_for_my_H1').css("color", colors[rand]);

来源

2011-05-05 12:45:37 gruntled

很多谢谢，那是我得到的同样的答案。非常感谢您的帮助！ – Hue 2011-05-05 12:50:03

.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

来源

2012-07-03 10:42:27 gaurang171

可能这可以帮助：
Changing colors of a DIV

这里是次的JS e代码概述了我使用的方法！ 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);

虽然这个职位是有点老了，但它可能是一些使用中这个问题的背景下！

来源

2015-10-07 19:05:11

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

来源

2017-10-24 17:55:07 user8827122

JQuery随机背景颜色和颜色，在2 div的

回答

相关问题