logo标签列表

两个div的随机预设背景色和文本颜色

jquerycssbackground-color
4

我希望创建一个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种颜色中随机选择一种来应用到背景颜色div和h1标签上呢？我找到了这个方法，但不确定如何将其应用到背景颜色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]);});
4个回答
15

我认为您试图实现的是这个：

假设您有一个像这样的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]);

非常感谢，这正是我得到的答案。非常感谢您的帮助！ - Hue
1

也许这可以帮助到你：
更改DIV的颜色

下面是我使用的方法的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);

虽然这篇文章有些旧，但在这个问题的背景下可能还是有一些用处的！

0
var array = ["orange", "blue", "black", "yellow", "green"];
var colorNumber = Math.round((Math.random() * (array.length - 1)));
$("body").css('background-color', array[colorNumber]);
0
.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 进行此操作。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接