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的

回答

相關問題