Juhuslike värvide generaator – JavaScript

See õpetus tutvustab JavaScriptis juhuslike värvide genereerimise protseduuri.

Kuidas genereerida JavaScriptis juhuslikku värvi?

JavaScriptis juhuslike värvide genereerimiseks kasutage ' Math.random()*16 ” meetod, mis loob juhusliku arvu vahemikus 0 kuni 16. Seda seetõttu, et see on üks viis juhusliku kuueteistkümnendsüsteemi väärtuse genereerimiseks, mida saab kasutada juhusliku värvi loomiseks.

Näide 1: loo juhuslik värv
HTML-failis loome konteineri ja lisame elemendi , mis genereerib nupuvajutusega juhuslikud värvid:

< span id = 'värvikonteiner' >
< nupu id = 'btn' > Klõpsake juhusliku värvi genereerimiseks nuppu >
ulatus >

Nüüd lisage JavaScripti faili või märgendisse

---

• Esiteks oleme määratlenud funktsiooni ' värvigeneraator() kus loome kuueteistkümnendnumbrid ” kuueteistkümnendarvude massiiv vahemikus 0 kuni 9 ja A kuni F.
• Loo muutuja ' värvikood ”.
• Seejärel kasutades ' jaoks ' tsükkel, igal iteratsioonil meetodid ' matemaatika ” Objekt genereerib juhusliku arvu vahemikus 0 kuni 16.
• Edastage saadud indeksi number 'hexDigits' ja salvestage vastav indeksi väärtus muutujas 'colorCode'.
• Protsessi korratakse 6 korda 6-kohalise koodi loomiseks.
• Lõpuks lisage see kood koos ' # ” märk ja naaske funktsiooni juurde.

Nüüd lisage ' addEventListener() ” meetodil nupu klõpsamise sündmusel. Kutsuge määratletud funktsioon ' värvigeneraator() ” kogu keha taustavärvi muutmiseks:

btn. addEventListener ( 'klõps' , ( ) => {
dokument. keha . stiilis . taustavärv = värvigeneraator ( ) ;
} ) ;

Väljund

Näide 2: Loo juhuslik värv koodiga
Siin trükime vastava juhuslikult genereeritud värvikoodi koos värviga, kasutades ' sisemine HTML ” vara:

btn. addEventListener ( 'klõps' , ( ) => {
dokument. keha . stiilis . taustavärv = värvigeneraator ( ) ;
dokument. getElementById ( 'värvikood' ) . sisemine HTML = värvigeneraator ( ) ;
} ) ;

Väljund näitab vastavat värvikoodi koos keha vastava taustavärviga:

See kõik puudutas JavaScripti juhuslikku värvigeneraatorit.

Järeldus

JavaScriptis juhusliku värvi genereerimiseks looge 6-kohaline kood, kasutades ' matemaatika ' objekti meetodid jaotises ' jaoks 'silmus. Igal iteratsioonil genereeritakse värvikoodi number ja muutuja järelkasv. See värvikood tagastatakse alguses tähega #. See õpetus demonstreeris JavaScriptis juhuslike värvide genereerimise protseduuri.