Random Color Generator – JavaScript

Ipapakita ng tutorial na ito ang pamamaraan para sa pagbuo ng mga random na kulay sa JavaScript.

Paano Gumawa ng Random na Kulay sa JavaScript?

Para sa pagbuo ng random na kulay sa JavaScript, gamitin ang ' Math.random()*16 ” paraan na lumilikha ng random na numero sa pagitan ng 0 at 16. Ito ay dahil ito ay isang paraan upang makabuo ng random na hexadecimal na halaga, na maaaring magamit upang lumikha ng random na kulay.

Halimbawa 1: Bumuo ng Random na Kulay
Sa isang HTML file, gagawa kami ng container at magdagdag ng element na bumubuo ng mga random na kulay sa pag-click sa button:

< span id = 'colorContainer' >
< button id = 'btn' > I-click upang Bumuo ng Random na Kulay pindutan >
span >

Ngayon, idagdag ang ibinigay na code sa JavaScript file o tag na

---

• Una, tinukoy namin ang isang function ' colorGenerator() 'kung saan tayo gumagawa ng' hexDigits ” hanay ng mga hexadecimal na numero mula 0 hanggang 9 at A hanggang F.
• Lumikha ng variable ' colorCode ”.
• Pagkatapos, gamit ang ' para sa ' loop, sa bawat pag-ulit, ang mga pamamaraan ng ' Math ” Ang bagay ay bumubuo ng random na numero sa pagitan ng 0 hanggang 16.
• Ipasa ang resultang index number sa 'hexDigits' at iimbak ang katumbas na halaga ng index sa variable na 'colorCode'.
• Uulitin ang proseso ng 6 na beses para sa paggawa ng 6 na digit na code.
• Panghuli, idagdag ang code na ito gamit ang “ # ” sign at bumalik sa function.

Ngayon, ilakip ang ' addEventListener() ” na paraan sa kaganapan ng pag-click ng button. Tawagan ang tinukoy na function na ' colorGenerator() ” para baguhin ang kulay ng background ng buong katawan:

btn. addEventListener ( 'click' , ( ) => {
dokumento. katawan . istilo . kulay ng background = colorGenerator ( ) ;
} ) ;

Output

Halimbawa 2: Bumuo ng Random na Kulay Gamit ang Code
Dito, ipi-print namin ang kaukulang random na nabuong code ng kulay na may kulay gamit ang ' innerHTML ” ari-arian:

btn. addEventListener ( 'click' , ( ) => {
dokumento. katawan . istilo . kulay ng background = colorGenerator ( ) ;
dokumento. getElementById ( 'colorCode' ) . innerHTML = colorGenerator ( ) ;
} ) ;

Ang output ay nagpapakita ng kaukulang color code na may kaugnay na kulay ng background ng katawan:

Iyon ay tungkol sa random na color generator sa JavaScript.

Konklusyon

Para sa pagbuo ng random na kulay sa JavaScript, lumikha ng 6 na digit na code gamit ang ' Math 'mga pamamaraan ng object sa ' para sa ” loop. Sa bawat pag-ulit, nabuo ang isang digit ng color code at pagkatapos ng pagtaas sa isang variable. Ang color code na ito ay ibinalik na may '#' sa simula. Ang tutorial na ito ay nagpakita ng pamamaraan para sa pagbuo ng mga random na kulay sa JavaScript.