Wie generiert man zufällige HEX-Farben in JavaScript? [Einfache Anleitung]

In diesem Artikel werde ich Sie durch die Erstellung einer JavaScript-Funktion führen, die einen zufälligen Hex-Farbcode generiert, der aus einer Mischung aus Zahlen und Alphabeten besteht.

Diese Funktion generiert bei jeder Ausführung eine zufällige Hex-Farbe:

function getRandomHexColor() {
    // Generate a random number between 0 and 16777215 (0xFFFFFF in decimal)
    const randomNumber = Math.floor(Math.random() * 16777215);
    // Convert the random number to a hexadecimal string and pad with leading zeros if necessary
    const randomHexColor = `#${randomNumber.toString(16).padStart(6, '0')}`;
    return randomHexColor;
}

// Example usage:
console.log(getRandomHexColor()); // e.g., #3e2f1b

1. Zufallszahlen generieren

Im ersten Schritt müssen wir Zufallszahlen generieren und das können wir ganz einfach mit dem JavaScript Math Object und der Math random() Methode machen.

Wenn Sie eine normale Zufallsmethode erstellen, erhalten Sie zufällige Dezimalzahlen, siehe Beispiel unten:

const randomValue = Math.random();
console.log(randomValue); // e.g., 0.123456789

Aber wir müssen eine Zufallszahl zwischen 0 und 16777215 generieren. Sie fragen sich vielleicht, warum ich 16777215 anstelle von „999999“ oder einer anderen sechsstelligen Zahl benötige. Nun, wir müssen diese achtstellige Zahl verwenden, weil die Zahl 16.777.215 ist ist der höchste Wert, den Sie mit einem sechsstelligen Hex-Farbcode haben können.

Hex-Farbcodes verwenden sechs Ziffern, wobei jede Ziffer von 0 bis 9 oder von A bis F sein kann, was 16 mögliche Auswahlmöglichkeiten für jede Ziffer bietet.

Das bedeutet, dass Sie insgesamt 16.777.216 verschiedene Farben mit sechs Ziffern erstellen können. Der größte Hex-Farbcode ist #FFFFFF, was 16.777.215 in Dezimalzahl entspricht.

Wenn Sie also eine Zahl bis zu 16.777.215 verwenden, können Sie alle möglichen Farben abdecken, die durch einen sechsstelligen Hex-Code dargestellt werden, einschließlich derjenigen, die alphabetische Zeichen enthalten. Dadurch wird sichergestellt, dass jede mögliche Farbe, egal ob Ziffern oder Buchstaben, enthalten ist.

Vergessen Sie nicht, die Math.random()-Methode in Math.floor() einzubinden, um sicherzustellen, dass Sie ganze Zahlen erhalten und Dezimalwerte vermeiden.

const randomNumber = Math.floor(Math.random() * 16777215);
console.log(randomNumber); // e.g., 45326764

2. Konvertieren einer Zahl in eine hexadezimale Zeichenfolge

function getRandomHexColor() {
    const randomNumber = Math.floor(Math.random() * 16777215);
    const randomHexColor = randomNumber.toString(16) //use the `toString(16)` method

}

Jetzt müssen wir die Zahl in eine hexadezimale Zeichenfolge umwandeln, was mit der Methode toString(16) einfach möglich ist.

Verwenden Sie einfach die Methode toString(16) für die Zufallszahl und übergeben Sie 16 als Argument, um sie in eine hexadezimale Zeichenfolge umzuwandeln.

Diese Methode stellt sicher, dass der resultierende Code nur Ziffern und Buchstaben von 0 bis F enthält, ohne Zeichen über F hinaus.

Lesen Sie auch: Google Analytics-Tracking-Code in Next.js [Einrichtungsanleitung]

3. Fügen Sie die padStart-Methode hinzu

Unsere Veranstaltung ist fast fertig. Es gibt jedoch ein potenzielles Problem: Manchmal ist der generierte Hex-Farbcode nur 5 statt 6 Zeichen lang.

Wenn die Funktion einen 5-stelligen Hex-Farbcode zurückgibt, ist dieser ungültig. Um dies zu beheben und sicherzustellen, dass wir immer einen 6-stelligen Hex-Farbcode erhalten, müssen wir dem Code die padStart-Methode hinzufügen.

Die Methode padStart(6, '0') stellt sicher, dass der Farbcode immer ein 6-stelliger Code ist, indem bei Bedarf führende Nullen hinzugefügt werden.

Wenn der Hexadezimalcode beispielsweise A9A9A lautet und nur fünf Zeichen enthält, fügt die Methode padStart(6, '0') eine führende 0 hinzu, um daraus einen sechsstelligen Farbcode zu machen, was zu 0A9A9A führt. Dadurch wird sichergestellt, dass die Funktion immer einen ordnungsgemäß formatierten Hex-Farbcode mit genau sechs Zeichen zurückgibt.

4. Geben Sie den generierten Hex-Code zurück

Der letzte Schritt besteht darin, den generierten zufälligen Hex-Farbcode zurückzugeben, damit er bei Bedarf problemlos verwendet werden kann.

Ich möchte eine Vorlagenzeichenfolge verwenden, um den Farbcode zu umschließen und # am Anfang hinzuzufügen, damit ich nicht jedes Mal, wenn ich diese Funktion verwende, manuell # hinzufügen muss.

function getRandomHexColor() {

    const randomNumber = Math.floor(Math.random() * 16777215);

    const randomHexColor = `#${randomNumber.toString(16).padStart(6, '0')}`;
    return randomHexColor; //return the code
}

// Example usage:
console.log(getRandomHexColor()); // e.g., #3e2f1b

Abschluss

Als ich zum ersten Mal einen zufälligen Hex-Farbgenerator in JavaScript erstellt habe, erzeugte dieser nur dunkle oder matte Farben, weil er keine alphabetischen Zeichen enthielt.

Nachdem ich einige Änderungen am Code vorgenommen hatte, erreichte ich endlich das gewünschte Ergebnis. Ich hoffe auch, dass dieser Beitrag Ihnen beim Erstellen einer ähnlichen Funktion Zeit gespart hat.

Teilen Sie diesen Beitrag mit Ihren Freunden, die auf der Suche nach einem neuen Projekt sind oder etwas mit JavaScript erstellen möchten!

Lesen Sie auch: So deaktivieren Sie HTML-Code, ohne ihn zu löschen [3 Methoden]

Das obige ist der detaillierte Inhalt vonWie generiert man zufällige HEX-Farben in JavaScript? [Einfache Anleitung]. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!