Zufälliger Farbgenerator – JavaScript

In diesem Tutorial wird das Verfahren zum Generieren zufälliger Farben in JavaScript demonstriert.

Wie erzeuge ich zufällige Farben in JavaScript?

Verwenden Sie zum Generieren zufälliger Farben in JavaScript das „ Math.random()*16 ”-Methode, die eine Zufallszahl zwischen 0 und 16 erstellt. Dies liegt daran, dass dies eine Möglichkeit ist, einen zufälligen Hexadezimalwert zu generieren, der zum Erstellen einer zufälligen Farbe verwendet werden kann.

Beispiel 1: Zufällige Farbe generieren
In einer HTML-Datei erstellen wir einen Container und fügen ein -Element hinzu, das die zufälligen Farben beim Klicken auf die Schaltfläche generiert:

< Span-ID = 'Farbcontainer' >
< Schaltflächen-ID = 'btn' > Klicken Sie hier, um eine zufällige Farbe zu erzeugen Taste >
Spanne >

Fügen Sie nun den unten angegebenen Code in die JavaScript-Datei oder das

---

• Zuerst haben wir eine Funktion definiert „ Farbgenerator() ” wo wir ein “ HexZiffern ” Array von Hexadezimalzahlen von 0 bis 9 und A bis F.
• Erstellen Sie eine Variable „ Farbcode “.
• Dann mit dem „ für ”-Schleife, bei jeder Iteration, die Methoden der “ Mathematik ” Objekt generiert eine Zufallszahl zwischen 0 und 16.
• Übergeben Sie die resultierende Indexnummer an die „hexDigits“ und speichern Sie den entsprechenden Indexwert in der Variable „colorCode“.
• Der Vorgang wird 6 Mal wiederholt, um einen 6-stelligen Code zu erstellen.
• Fügen Sie abschließend diesen Code mit dem „ # ” unterzeichnen und zur Funktion zurückkehren.

Hängen Sie nun das „ addEventListener() ”-Methode für das Click-Ereignis der Schaltfläche. Aufruf der definierten Funktion „ Farbgenerator() ” um die Hintergrundfarbe des gesamten Körpers zu ändern:

btn. addEventListener ( 'klicken' , ( ) => {
dokumentieren. Körper . Stil . Hintergrundfarbe = Farbgenerator ( ) ;
} ) ;

Ausgang

Beispiel 2: Zufällige Farbe mit Code generieren
Hier drucken wir den entsprechenden zufällig generierten Farbcode mit der Farbe unter Verwendung des „ innerHTML ' Eigentum:

btn. addEventListener ( 'klicken' , ( ) => {
dokumentieren. Körper . Stil . Hintergrundfarbe = Farbgenerator ( ) ;
dokumentieren. getElementById ( 'Farbcode' ) . innerHTML = Farbgenerator ( ) ;
} ) ;

Die Ausgabe zeigt den entsprechenden Farbcode mit der entsprechenden Hintergrundfarbe des Körpers:

Das war alles über den zufälligen Farbgenerator in JavaScript.

Abschluss

Erstellen Sie zum Generieren zufälliger Farben in JavaScript einen 6-stelligen Code mit „ Mathematik ” Objektmethoden in der “ für “Schleife. Bei jeder Iteration wird eine Farbcodeziffer generiert und in einer Variablen nachgezählt. Dieser Farbcode wird mit „#“ am Anfang zurückgegeben. In diesem Tutorial wurde das Verfahren zum Generieren zufälliger Farben in JavaScript demonstriert.