Tilfeldig fargegenerator - JavaScript

Mens de utvikler nettsteder, kan utviklere kanskje generere tilfeldige farger dynamisk ved hjelp av JavaScript. Det brukes i styling av websider, datavisualiseringer, generering av fargevalg, spillutvikling og mange flere. For eksempel skaper utviklere visuelle effekter, for eksempel eksplosjoner eller partikkeleffekter i spill, skiller mellom forskjellige datapunkter eller kategorier i datavisualisering, og så videre.

Denne opplæringen vil demonstrere prosedyren for å generere tilfeldige farger i JavaScript.

Hvordan generere tilfeldig farge i JavaScript?

For å generere tilfeldig farge i JavaScript, bruk "Matte.tilfeldig ()*16”Metode som skaper et tilfeldig tall mellom 0 og 16. Dette er fordi det er en måte å generere en tilfeldig heksadesimal verdi, som kan brukes til å lage en tilfeldig farge.

Eksempel 1: Generer tilfeldig farge
I en HTML -fil oppretter vi en beholder og legger til et element som genererer de tilfeldige fargene på knappeklikk:

= "ColorContainer">
Klikk for å generere tilfeldig farge

Legg nå til den undergitte koden i JavaScript-filen eller taggen:

funksjon ColorGenerator ()
var hexdigits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', ​​'f'];
var colorcode = "";
for (var i = 0; i<6; i++)
colorCode += hexdigits [matte.gulv (matematikk.tilfeldig ()*16)];

return '#$ colorCode'

I ovennevnte kodebit:

• Først har vi definert en funksjon "ColorGenerator ()”Hvor vi lager en“Hexdigits”Rekke heksadesimale tall fra 0 til 9 og A til F.
• Lag en variabel “fargekode”.
• Deretter ved å bruke “til”Loop, på hver iterasjon, metodene til“Matte”Objekt genererer et tilfeldig tall mellom 0 til 16.
• Gi det resulterende indeksnummeret til “Hexdigits” og lagre den tilsvarende indeksverdien i variabelen “ColorCode”.
• Prosessen vil gjenta 6 ganger for å lage en 6-sifret kode.
• Til slutt, legg til denne koden med "#”Signer og gå tilbake til funksjonen.

Nå, legg ved “AddEventListener ()”Metode på knappens klikkhendelse. Ring den definerte funksjonen "ColorGenerator ()”For å endre bakgrunnsfargen på hele kroppen:

btn.AddEventListener ('klikk', () =>
dokument.kropp.stil.BakgrunnColor = ColorGenerator ();
);

Produksjon

Eksempel 2: Generer tilfeldig farge med kode
Her skriver vi ut den tilsvarende tilfeldig genererte fargekoden med fargen ved å bruke "indrehtml”Eiendom:

btn.AddEventListener ('klikk', () =>
dokument.kropp.stil.BakgrunnColor = ColorGenerator ();
dokument.GetElementById ("ColorCode").InnerHTML = ColorGenerator ();
);

Utgangen viser tilsvarende fargekode med den relevante bakgrunnsfargen på kroppen:

Det handlet om den tilfeldige fargegeneratoren i JavaScript.

Konklusjon

For å generere tilfeldig farge i JavaScript, oppretter du en 6-sifret kode ved å bruke "Matte”Objektmetoder i“til" Løkke. På hver iterasjon genereres et fargekodesifret og post-increment i en variabel. Denne fargekoden returneres med “#” i begynnelsen. Denne opplæringen demonstrerte prosedyren for å generere tilfeldige farger i JavaScript.