Denne vejledning vil demonstrere proceduren til at generere tilfældige farver i JavaScript.
Hvordan genererer man tilfældig farve i JavaScript?
For at generere tilfældig farve i JavaScript skal du bruge ' Math.random()*16 ” metode, der skaber et tilfældigt tal mellem 0 og 16. Dette skyldes, at det er én måde at generere en tilfældig hexadecimal værdi, som kan bruges til at skabe en tilfældig farve.
Eksempel 1: Generer tilfældig farve
I en HTML-fil vil vi oprette en beholder og tilføje et
< span id = 'colorContainer' >
< knap-id = 'btn' > Klik for at generere tilfældig farve knap >
span >
Tilføj nu den nedenfor angivne kode i JavaScript-fil eller
- Først har vi defineret en funktion ' colorGenerator() ” hvor vi skaber en ” hexcifre ” matrix af hexadecimale tal fra 0 til 9 og A til F.
- Opret en variabel ' farvekode ”.
- Brug derefter ' til ”-løkke, ved hver iteration, metoderne til ” Matematik Objekt genererer et tilfældigt tal mellem 0 og 16.
- Send det resulterende indeksnummer til 'hexDigits' og gem den tilsvarende indeksværdi i 'colorCode'-variablen.
- Processen gentages 6 gange for at oprette en 6-cifret kode.
- Tilføj endelig denne kode med ' # ” underskrive og vende tilbage til funktionen.
Vedhæft nu ' addEventListener() ”-metoden på knappens klikhændelse. Kald den definerede funktion ' colorGenerator() ” for at ændre baggrundsfarven for hele kroppen:
btn. addEventListener ( 'klik' , ( ) => {dokument. legeme . stil . baggrundsfarve = farvegenerator ( ) ;
} ) ;
Produktion
Eksempel 2: Generer tilfældig farve med kode
Her vil vi udskrive den tilsvarende tilfældigt genererede farvekode med farven ved hjælp af ' indreHTML ” ejendom:
dokument. legeme . stil . baggrundsfarve = farvegenerator ( ) ;
dokument. getElementById ( 'farvekode' ) . indreHTML = farvegenerator ( ) ;
} ) ;
Outputtet viser tilsvarende farvekode med den relevante baggrundsfarve for kroppen:
Det handlede om den tilfældige farvegenerator i JavaScript.
Konklusion
For at generere tilfældig farve i JavaScript skal du oprette en 6-cifret kode ved hjælp af ' Matematik ' objektmetoder i ' til ” sløjfe. Ved hver iteration genereres et farvekodeciffer, som efter-inkrementeres i en variabel. Denne farvekode returneres med '#' i begyndelsen. Denne tutorial demonstrerede proceduren til at generere tilfældige farver i JavaScript.