Losowy generator kolorów - JavaScript

Podczas opracowywania stron internetowych programiści mogą potrzebować dynamicznie generować losowe kolory za pomocą JavaScript. Jest używany w stylizacji strony internetowej, wizualizacji danych, generowaniu schematów kolorów, tworzeniu gier i wielu innych. Na przykład programiści tworzą efekty wizualne, takie jak eksplozje lub efekty cząstek w grach, rozróżniają różne punkty danych lub kategorie w wizualizacji danych i tak dalej.

Ten samouczek pokaże procedurę generowania losowych kolorów w JavaScript.

Jak generować losowy kolor w JavaScript?

Do generowania losowego koloru w JavaScript użyj „Matematyka.Random ()*16„Metoda, która tworzy liczbę losową między 0 a 16. Jest tak, ponieważ jest to jeden ze sposobów wygenerowania losowej wartości szesnastkowej, którą można użyć do stworzenia losowego koloru.

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

= „ColorContainer”>
Kliknij, aby wygenerować losowy kolor

Teraz dodaj poniższy kod w pliku lub znaczniku JavaScript:

Funkcja ColorGenerator ()
var hexdigits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, „a”, „b”, „c”, „d”, „e”, „f”];
var colorCode = "";
dla (var i = 0; i<6; i++)
Kod kolorów += heksDigits [matematyka.podłoga (matematyka.Random ()*16)];

return '#$ colorCode'

W powyższym fragmencie kodu:

• Najpierw zdefiniowaliśmy funkcję „coldenerator ()„Gdzie tworzymy„HeksDigits”Tablica liczb sześciokadciowców od 0 do 9 i A do F.
• Utwórz zmienną „kod koloru".
• Następnie za pomocą „Do„Pętla, przy każdej iteracji, metod„Matematyka”Obiekt generuje liczbę losową od 0 do 16.
• Przekaż wynikowy numer indeksu do „hexdigits” i przechowuj odpowiednią wartość indeksu w zmiennej „kod kolorów”.
• Proces powtórzy się 6 razy w celu utworzenia 6-cyfrowego kodu.
• Na koniec dodaj ten kod za pomocą „#”Podpisz i powrót do funkcji.

Teraz dołącz „addEventListener ()„Metoda na zdarzeniu przycisku. Wywołać zdefiniowaną funkcję „coldenerator ()„Aby zmienić kolor tła całego ciała:

Btn.addEventListener („kliknij”, () =>
dokument.ciało.styl.tło Color = coldenerator ();
);

Wyjście

Przykład 2: Wygeneruj losowy kolor z kodem
Tutaj wydrukujemy odpowiedni losowo wygenerowany kod kolorów z kolorem za pomocą „InnerHtml" nieruchomość:

Btn.addEventListener („kliknij”, () =>
dokument.ciało.styl.tło Color = coldenerator ();
dokument.getElementById („kod kolorów”).innerHtml = coldenerator ();
);

Wyjście pokazuje odpowiedni kod kolorów z odpowiednim kolorem tła ciała:

Chodziło o losowy generator kolorów w JavaScript.

Wniosek

Aby generować losowy kolor w JavaScript, utwórz 6-cyfrowy kod za pomocą „Matematyka„Metody obiektowe w„Do" pętla. Na każdej iteracji generowana jest cyfra kodu kolorów i po zmiennej w zmiennej. Ten kod kolorów jest na początku zwracany z „#”. Ten samouczek wykazał procedurę generowania losowych kolorów w JavaScript.