Generator losowych kolorów – JavaScript

W tym samouczku zademonstrujemy procedurę generowania losowych kolorów w JavaScript.

Jak wygenerować losowy kolor w JavaScript?

Aby wygenerować losowy kolor w JavaScript, użyj „ Matematyka.random()*16 ”, która tworzy losową liczbę z zakresu od 0 do 16. Dzieje się tak, ponieważ jest to jeden ze sposobów generowania losowej wartości szesnastkowej, której można użyć do utworzenia losowego koloru.

Przykład 1: Wygeneruj losowy kolor
W pliku HTML utworzymy kontener i dodamy element , który generuje losowe kolory po kliknięciu przycisku:

< identyfikator rozpiętości = „pojemnik koloru” >
< identyfikator przycisku = 'btn' > Kliknij, aby wygenerować losowy kolor przycisk >
Zakres >

Teraz dodaj poniższy kod w pliku JavaScript lub tagu

---

• Najpierw zdefiniowaliśmy funkcję „ generator kolorów() ” gdzie tworzymy „ cyfry szesnastkowe ” tablica liczb szesnastkowych od 0 do 9 i od A do F.
• Utwórz zmienną „ kod koloru ”.
• Następnie za pomocą „ Do ”, w każdej iteracji, metody „ Matematyka Obiekt generuje losową liczbę od 0 do 16.
• Przekaż wynikowy numer indeksu do „hexDigits” i zapisz odpowiednią wartość indeksu w zmiennej „colorCode”.
• Proces zostanie powtórzony 6 razy w celu utworzenia 6-cyfrowego kodu.
• Na koniec dodaj ten kod z „ # ” i wróć do funkcji.

Teraz dołącz „ addEventListener() ” na zdarzeniu kliknięcia przycisku. Wywołaj zdefiniowaną funkcję „ generator kolorów() ”, aby zmienić kolor tła całego ciała:

btn. addEventListener ( 'Kliknij' , ( ) => {
dokument. ciało . styl . kolor tła = Generator kolorów ( ) ;
} ) ;

Wyjście

Przykład 2: Wygeneruj losowy kolor za pomocą kodu
Tutaj wydrukujemy odpowiedni losowo wygenerowany kod koloru z kolorem za pomocą „ wewnętrzny HTML ' nieruchomość:

btn. addEventListener ( 'Kliknij' , ( ) => {
dokument. ciało . styl . kolor tła = Generator kolorów ( ) ;
dokument. getElementById ( 'kod koloru' ) . wewnętrzny HTML = Generator kolorów ( ) ;
} ) ;

Dane wyjściowe pokazują odpowiedni kod koloru z odpowiednim kolorem tła korpusu:

To było wszystko o losowym generatorze kolorów w JavaScript.

Wniosek

Aby wygenerować losowy kolor w JavaScript, utwórz 6-cyfrowy kod, używając „ Matematyka ” metody obiektowe w „ Do ' pętla. W każdej iteracji generowana jest cyfra kodu koloru i następuje przyrost w zmiennej. Ten kod koloru jest zwracany z „#” na początku. W tym samouczku zademonstrowano procedurę generowania losowych kolorów w JavaScript.