Generator naključnih barv – JavaScript

Ta vadnica bo prikazala postopek za generiranje naključnih barv v JavaScriptu.

Kako ustvariti naključno barvo v JavaScriptu?

Za generiranje naključne barve v JavaScriptu uporabite » Math.random()*16 ”, ki ustvari naključno število med 0 in 16. To je zato, ker je to eden od načinov za ustvarjanje naključne šestnajstiške vrednosti, ki se lahko uporabi za ustvarjanje naključne barve.

Primer 1: Ustvarite naključno barvo
V datoteki HTML bomo ustvarili vsebnik in dodali element , ki ustvari naključne barve ob kliku gumba:

< span id = 'colorContainer' >
< ID gumba = 'btn' > Kliknite za ustvarjanje naključne barve gumb >
razpon >

Zdaj dodajte spodnjo kodo v datoteko JavaScript ali oznako

---

• Najprej smo definirali funkcijo ' colorGenerator() , kjer ustvarimo hexDigits ” niz šestnajstiških števil od 0 do 9 in A do F.
• Ustvarite spremenljivko ' colorCode ”.
• Nato z uporabo ' za ', pri vsaki ponovitvi metode ' matematika ” Objekt ustvari naključno število med 0 in 16.
• Posredujte dobljeno številko indeksa v 'hexDigits' in shranite ustrezno vrednost indeksa v spremenljivko 'colorCode'.
• Postopek se bo ponovil 6-krat za ustvarjanje 6-mestne kode.
• Na koncu dodajte to kodo z ' # ” in se vrnite na funkcijo.

Zdaj priložite » addEventListener() ” na dogodek klika gumba. Pokličite definirano funkcijo ' colorGenerator() ”, da spremenite barvo ozadja celotnega telesa:

btn. addEventListener ( 'klik' , ( ) => {
dokument. telo . stil . Barva ozadja = colorGenerator ( ) ;
} ) ;

Izhod

2. primer: ustvarite naključno barvo s kodo
Tukaj bomo natisnili ustrezno naključno ustvarjeno barvno kodo z barvo z uporabo ' notranjiHTML ” Lastnost:

btn. addEventListener ( 'klik' , ( ) => {
dokument. telo . stil . Barva ozadja = colorGenerator ( ) ;
dokument. getElementById ( 'colorCode' ) . notranjiHTML = colorGenerator ( ) ;
} ) ;

Izhod prikazuje ustrezno barvno kodo z ustrezno barvo ozadja telesa:

To je bilo vse o generatorju naključnih barv v JavaScriptu.

Zaključek

Za generiranje naključne barve v JavaScriptu ustvarite 6-mestno kodo z uporabo ' matematika ' predmetne metode v ' za ” zanke. Pri vsaki ponovitvi se generira številka barvne kode in se naknadno poveča v spremenljivki. Ta barvna koda je vrnjena z '#' na začetku. Ta vadnica je prikazala postopek za generiranje naključnih barv v JavaScriptu.