Zufälliger Farbgenerator - JavaScript

Während der Entwicklung von Websites müssen Entwickler möglicherweise zufällige Farben dynamisch mit JavaScript generieren. Es wird im Webseiten -Styling, Datenvisualisierungen, Farbschemata, Spieleentwicklung und vieles mehr verwendet. Zum Beispiel erzeugen Entwickler visuelle Effekte wie Explosionen oder Partikeleffekte in Spielen, differenzieren Sie zwischen verschiedenen Datenpunkten oder Kategorien in der Datenvisualisierung usw.

In diesem Tutorial wird das Verfahren zur Erzeugung von zufälligen Farben in JavaScript demonstriert.

So generieren Sie zufällige Farbe in JavaScript?

Verwenden Sie die „zufällige Farbe in JavaScript“ die “Mathematik.random ()*16Methode, die eine Zufallszahl zwischen 0 und 16 erstellt. Dies liegt daran.

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

= "ColorContainer">
Klicken Sie hier, um eine zufällige Farbe zu generieren

Fügen Sie nun den folgenden Code in JavaScript-Datei oder Tag hinzu:

Funktion Colorgenerator ()
var hexDigits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];
var colorcode = "";
für (var i = 0; i<6; i++)
ColorCode += HexDigits [Mathematik.Boden (Mathematik.random ()*16)];

Return '#$ ColorCode'

Im obigen Code -Snippet:

• Erstens haben wir eine Funktion definiert “Colorgenerator ()"Wo wir eine schaffen"HexdigitsArray von Hexadezimalzahlen von 0 bis 9 und A bis F.
• Erstellen Sie eine Variable “Farbcode”.
• Dann verwenden Sie die “für"Schleife, auf jeder Iteration die Methoden der"MathematikObjekt generiert eine Zufallszahl zwischen 0 und 16.
• Übergeben Sie die resultierende Indexnummer an die "Hexdigits" und speichern Sie den entsprechenden Indexwert in der Variablen "Colorcode".
• Der Vorgang wiederholt sich sechsmal, um einen 6-stelligen Code zu erstellen.
• Schließlich fügen Sie diesen Code mit dem "hinzu"#”Zeichen und zurück zur Funktion zurückkehren.

Jetzt die “anbringen“AddEventListener ()”Methode auf dem Klickereignis der Schaltfläche. Rufen Sie die definierte Funktion auf “Colorgenerator ()”Um die Hintergrundfarbe des gesamten Körpers zu ändern:

Btn.AddEventListener ('Click', () =>
dokumentieren.Körper.Stil.HintergrundColor = ColorGenerator ();
);

Ausgang

Beispiel 2: Generieren Sie zufällige Farbe mit Code
Hier drucken wir den entsprechenden zufällig generierten Farbcode mit der Farbe mit dem “Innerhtml" Eigentum:

Btn.AddEventListener ('Click', () =>
dokumentieren.Körper.Stil.HintergrundColor = ColorGenerator ();
dokumentieren.getElementById ("ColorCode").Innerhtml = Colorgenerator ();
);

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

Das drehte sich um den zufälligen Farbgenerator in JavaScript.

Abschluss

Erstellen Sie zum Generieren zufälliger Farbe in JavaScript einen 6-stelligen Code mit “Mathematik"Objektmethoden in"für”Schleife. Bei jeder Iteration wird eine Farbcode-Ziffer generiert und nach der Inkrementierung in einer Variablen. Dieser Farbcode wird am Anfang mit "#" zurückgegeben. In diesem Tutorial wurde das Verfahren zur Erzeugung von zufälligen Farben in JavaScript gezeigt.