Véletlenszerű színgenerátor – JavaScript

Ez az oktatóanyag bemutatja a véletlenszerű színek létrehozásának eljárását JavaScriptben.

Hogyan lehet véletlenszerű színeket generálni JavaScriptben?

Véletlenszerű szín generálásához JavaScriptben használja a ' Math.random()*16 ” módszer, amely 0 és 16 közötti véletlenszámot hoz létre. Ez azért van, mert ez az egyik módja a véletlenszerű hexadecimális érték generálásának, amellyel véletlenszerű színt lehet létrehozni.

1. példa: Véletlenszerű szín létrehozása
Egy HTML-fájlban létrehozunk egy tárolót, és hozzáadunk egy elemet, amely véletlenszerű színeket generál a gombra kattintva:

< span id = 'színes tároló' >
< gomb id = 'btn' > Kattintson a véletlenszerű szín létrehozásához gomb >
span >

Most adja hozzá az alábbi kódot a JavaScript-fájlhoz vagy a

---

• Először definiáltunk egy függvényt ' színgenerátor() ' ahol létrehozunk egy ' hexDigits ” hexadecimális számok tömbje 0-tól 9-ig és A-tól F-ig.
• Hozzon létre egy változót ' színkód ”.
• Ezután a „ számára ' ciklus minden iterációnál a ' Math ” Az objektum 0 és 16 közötti véletlenszámot generál.
• Adja át az eredményül kapott indexszámot a „hexDigits”-nek, és tárolja a megfelelő indexértéket a „colorCode” változóban.
• A folyamat 6-szor megismétlődik egy 6 számjegyű kód létrehozásához.
• Végül add hozzá ezt a kódot a „ # ” jelet, és térjen vissza a függvényhez.

Most csatolja a „ addEventListener() ” módszer a gomb kattintási eseményén. Hívja meg a meghatározott függvényt ' színgenerátor() ” az egész test háttérszínének megváltoztatásához:

btn. addEventListener ( 'kattint' , ( ) => {
dokumentum. test . stílus . háttérszín = színgenerátor ( ) ;
} ) ;

Kimenet

2. példa: Véletlenszerű szín létrehozása kóddal
Itt kinyomtatjuk a megfelelő véletlenszerűen generált színkódot a színnel a ' innerHTML ' ingatlan:

btn. addEventListener ( 'kattint' , ( ) => {
dokumentum. test . stílus . háttérszín = színgenerátor ( ) ;
dokumentum. getElementById ( 'színkód' ) . innerHTML = színgenerátor ( ) ;
} ) ;

A kimenet a megfelelő színkódot mutatja a törzs megfelelő háttérszínével:

Ez minden a JavaScript véletlenszerű színgenerátoráról szólt.

Következtetés

Ha véletlenszerű színt szeretne generálni JavaScriptben, hozzon létre egy 6 számjegyű kódot a ' Math ' objektum metódusok a ' számára ” hurok. Minden iteráció során egy színkód számjegy jön létre, és egy változó utólag növekszik. Ezt a színkódot az elején „#” jelzi. Ez az oktatóanyag a véletlenszerű színek JavaScriptben történő generálásának eljárását mutatta be.