Willekeurige kleurengenerator - JavaScript

Deze zelfstudie demonstreert de procedure voor het genereren van willekeurige kleuren in JavaScript.

Hoe willekeurige kleuren in JavaScript te genereren?

Gebruik voor het genereren van willekeurige kleuren in JavaScript de ' Wiskunde.willekeurig()*16 ” methode die een willekeurig getal creëert tussen 0 en 16. Dit komt omdat het een manier is om een ​​willekeurige hexadecimale waarde te genereren, die kan worden gebruikt om een ​​willekeurige kleur te creëren.

Voorbeeld 1: willekeurige kleur genereren
In een HTML-bestand maken we een container en voegen we een -element toe dat de willekeurige kleuren genereert wanneer op de knop wordt geklikt:

< span id = 'kleurContainer' >
< knop-id = 'btn' > Klik om willekeurige kleur te genereren knop >
span >

Voeg nu de onderstaande code toe aan het JavaScript-bestand of de

---

• Eerst hebben we een functie gedefinieerd ' kleurGenerator() ” waar we een “ hexDigits ” reeks hexadecimale getallen van 0 tot 9 en A tot F.
• Maak een variabele ' kleurcode ”.
• Gebruik vervolgens de ' voor ” lus, bij elke iteratie, de methoden van de “ Wiskunde ” Object genereert een willekeurig getal tussen 0 en 16.
• Geef het resulterende indexnummer door aan de 'hexDigits' en sla de overeenkomstige indexwaarde op in de variabele 'colorCode'.
• Het proces wordt 6 keer herhaald voor het maken van een 6-cijferige code.
• Voeg ten slotte deze code toe met de ' # ” teken en keer terug naar de functie.

Bevestig nu de ' addEventListener() '-methode op de klikgebeurtenis van de knop. Roep de gedefinieerde functie aan ' kleurGenerator() ” om de achtergrondkleur van het hele lichaam te wijzigen:

btn. addEventListener ( 'Klik' , ( ) => {
document. lichaam . stijl . Achtergrond kleur = kleurGenerator ( ) ;
} ) ;

Uitgang

Voorbeeld 2: Genereer willekeurige kleur met code
Hier zullen we de corresponderende willekeurig gegenereerde kleurcode afdrukken met de kleur met behulp van de ' binnenHTML ' eigendom:

btn. addEventListener ( 'Klik' , ( ) => {
document. lichaam . stijl . Achtergrond kleur = kleurGenerator ( ) ;
document. getElementById ( 'kleurcode' ) . binnenHTML = kleurGenerator ( ) ;
} ) ;

De output toont overeenkomstige kleurcode met de relevante achtergrondkleur van het lichaam:

Dat ging allemaal over de willekeurige kleurengenerator in JavaScript.

Conclusie

Maak voor het genereren van willekeurige kleuren in JavaScript een 6-cijferige code met ' Wiskunde ” object methoden in de “ voor ” lus. Bij elke iteratie wordt een kleurcodecijfer gegenereerd en na verhoging in een variabele. Deze kleurcode wordt aan het begin geretourneerd met '#'. Deze tutorial demonstreerde de procedure voor het genereren van willekeurige kleuren in JavaScript.