Random vordefinierte hintergrund-Farbe und text-Farbe auf 2 divs

Ich bin auf der Suche, um erstellen Sie ein Jquery-Skript, das nach dem Zufallsprinzip wählen Sie eine Farbe aus einer Liste von 10, und dann wenden Sie es als hintergrund-Farbe ein div, und die Farbe der h1-tag.

Bisher habe ich das macht eine zufällige Farbe:

$(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);});

aber wie kann ich diese wählen nach dem Zufallsprinzip aus einer Liste von 10 Farben?
Ich fand diese, aber nicht sicher, wie Sie Sie anwenden würde, dies zu Hintergrundfarbe, div und 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]);});

InformationsquelleAutor Hue | 2011-05-05

14

Ich denke, was Sie versuchen zu erreichen, ist diese:

Vorausgesetzt, Sie haben eine HTML-Seite wie diese:
```
<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]);
});
```
Nachdem Sie erstellt haben Ihre Farben-array erhalten Sie dann eine zufällige Nummer entspricht dem index der Farbe.

Nun, dass Sie einen zufälligen index Sie können es verwenden, um die Hintergrundfarbe oder Textfarbe eines Objektes.

Wenn Sie wollte, die Farben werden für jeden anders, dann würde Sie einfach anrufen
```
rand = Math.floor(Math.random()*colors.length);
```
wieder, bevor Sie die Farbe Ihrer nächsten element.

Und schließlich durch den Aufruf $('h1').css("color", colors[rand]); Sie die Farbe auf alle H1-Elemente auf der Seite, die Sie wollen, dass es bestimmte Gruppe eine ID oder Klasse Wert auf die H1 und verwenden Sie dann $('h1.myclass').css("color", colors[rand]); ODER $('#ID_for_my_H1').css("color", colors[rand]);
- Vielen Dank, das ist die gleiche Antwort, die ich bekam als gut. Vielen Dank für Eure Hilfe!
InformationsquelleAutor gruntled
1

Werden können, kann dies helfen:

Ändern der Farben von einem DIV

Hier der JS code für einen überblick über Ansatz, den ich verwendet!
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);
```
Obwohl, dieser post ist etwas alt, aber es kann von nutzen sein im Zusammenhang mit dieser Frage!!!

InformationsquelleAutor Tushar Shukla

.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);
});

Versuchen Sie, diese mithilfe der link - http://codebins.com/codes/home/4ldqpby

InformationsquelleAutor gaurang171

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

InformationsquelleAutor user8827122

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.