Random predefined background color and text color on 2 divs

前端未结

关注

 4  694

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. <

相关标签:

4条回答

故里飘歌

2020-12-11 10:01
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]);
0 讨论(0)
发布评论:

提交评论
- 加载中...

遇见更好的自我

2020-12-11 10: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);
});

Try this using link http://codebins.com/codes/home/4ldqpby

0 讨论(0)

情话喂你

2020-12-11 10:14

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

0 讨论(0)

忘掉有多难

2020-12-11 10:15
May be this can help:
Changing colors of a DIV

Here is the JS of the code for an overview of approach that i used! 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!!
0 讨论(0)
发布评论:

提交评论
- 加载中...