Tämä opetusohjelma esittelee satunnaisten värien luomisen JavaScriptissä.
Kuinka luoda satunnaisia värejä JavaScriptissä?
Jos haluat luoda satunnaisia värejä JavaScriptissä, käytä ' Math.random()*16 ” menetelmä, joka luo satunnaisluvun väliltä 0 ja 16. Tämä johtuu siitä, että se on yksi tapa luoda satunnainen heksadesimaaliarvo, jota voidaan käyttää satunnaisen värin luomiseen.
Esimerkki 1: Luo satunnainen väri
HTML-tiedostoon luomme säilön ja lisäämme
< span id = 'värisäiliö' >
< painikkeen tunnus = 'btn' > Napsauta luodaksesi satunnaisen värin -painiketta >
jänneväli >
Lisää nyt alla annettu koodi JavaScript-tiedostoon tai
- Ensinnäkin olemme määrittäneet funktion ' värigeneraattori() 'jossa luomme' heksanumerot ” heksadesimaalilukujen joukko 0–9 ja A–F.
- Luo muuttuja ' värikoodi ”.
- Käytä sitten ' varten 'silmukassa, jokaisessa iteraatiossa '' Matematiikka ” Objekti luo satunnaisluvun väliltä 0-16.
- Välitä tuloksena oleva indeksinumero 'heksanumeroihin' ja tallenna vastaava indeksiarvo 'colorCode'-muuttujaan.
- Prosessi toistetaan 6 kertaa 6-numeroisen koodin luomiseksi.
- Lisää lopuksi tämä koodi ' # ” -merkki ja palaa toimintoon.
Liitä nyt ' addEventListener() ' -menetelmää painikkeen napsautustapahtumassa. Kutsu määritettyä funktiota ' värigeneraattori() ” muuttaaksesi koko kehon taustaväriä:
btn. addEventListener ( 'klikkaus' , ( ) => {asiakirja. kehon . tyyli . taustaväri = värigeneraattori ( ) ;
} ) ;
Lähtö
Esimerkki 2: Luo satunnainen väri koodilla
Täällä tulostamme vastaavan satunnaisesti luodun värikoodin värillä käyttämällä ' innerHTML ”omaisuus:
asiakirja. kehon . tyyli . taustaväri = värigeneraattori ( ) ;
asiakirja. getElementById ( 'värikoodi' ) . innerHTML = värigeneraattori ( ) ;
} ) ;
Tulos näyttää vastaavan värikoodin rungon taustavärin kanssa:
Siinä oli kyse JavaScriptin satunnaisesta värigeneraattorista.
Johtopäätös
Jos haluat luoda satunnaisia värejä JavaScriptissä, luo 6-numeroinen koodi käyttämällä ' Matematiikka ' objektimenetelmät ' varten 'silmukka. Jokaisessa iteraatiossa luodaan värikoodin numero ja sitä lisätään muuttujaan jälkikäteen. Tämän värikoodin alussa on '#'. Tämä opetusohjelma esitteli menetelmän satunnaisten värien luomiseksi JavaScriptissä.