Losowy kolor CSS
Przykład nr 01
Zacznijmy od pierwszego przykładu tego artykułu, pokazując użycie prostej funkcji koloru wyboru do generowania losowych kolorów na elementach HTML. Ten przykładowy kod rozpoczął się od głównego znacznika HTML, a następnie pustego znacznika głowy. Używamy znacznika ciała do zdefiniowania elementów ciała tej strony HTML, a następnie znacznika skryptu zawierającego stylizację JavaScript, aby ta strona jest estetyczna i stylizowana. Tekst nadwozia został wyrównany do centrum za pomocą właściwości „Wyrównanie tekstu” w tagu stylu wbudowanego. Zastosowano tutaj dwa nagłówki rozmiaru 1.
Pierwszy nagłówek wykorzystuje styliza. Podczas gdy drugi nagłówek został określony za pomocą identyfikatora „Pick” i znacznika stylizacji wbudowanej, aby pokolorować go czerwony przez jakiś czas za pośrednictwem właściwości „kolor”. Następnie znacznik przycisku jest używany z atrybutem OnClick, który otrzymuje wartość zwracania z funkcji „PickColor ()”, aby określić, który kolor musi być wyświetlany po stukaniu tego przycisku. Oto kod JavaScript dla tego skryptu HTML, aby był dynamiczny. Zawiera znacznik skryptu, a następnie użycie definicji funkcji dla metody „PickColor”. Ta metoda inicjuje tablicę „Col” przyjmującą w niej różne kolory, ja.mi., Korzystanie z określonych numerów kolorów.
Kolejna zmienna, „Random_color”, została użyta do uzyskania losowego koloru z tablicy „Col” poprzez zastosowanie funkcji „podłogi” i „losowych” biblioteki matematycznej. Niezależnie od wartości „podłogi”, zostanie użyta do uzyskania losowego koloru z określonego indeksu tej tablicy. Identyfikator „Wybierz” nagłówek 2 dla tego pliku HTML został użyty do uzyskania identyfikatora i zapisania do zmiennej „X”. Następnie atrybut stylu „Kolor” zastosowano do zmiennej „X” do losowego koloru 2 za pomocą zmiennej „Random_color”. To jest o tym kodzie. Zapiszmy go i uruchommy z menu „Uruchom”.
Wyjście w przeglądarce Chrome pokazano na następującym obrazie. Pokazuje dwa nagłówki, a następnie prosty przycisk. Pierwszy nagłówek jest statyczny, podczas gdy drugi nagłówek został użyty do losowej zmiany koloru, gdy użytkownik strywa przycisk.
Przed stuknięciem przycisk kolor nagłówka był czerwony. Po stukaniu, okazuje się, jak pokazano poniżej, ja.mi., Light Orange:
Ponownie stukając przycisk, kolor nagłówka zmienia żółty.
Po raz kolejny stukanie przycisku zmienia kolor nagłówka na zielony.
W ten sposób każde dotknięcie przycisku losowo zmieniłby kolor nagłówka, ja.mi., niebieski, zielony, żółty itp.
Przykład nr 02
Zacznijmy od zaawansowanego przykładu losowej zmiany koloru jakiegoś elementu z pliku HTML. Utworzyliśmy plik HTML, który losowo zmieni kolor na nagłówkach po każdej sekundzie bez użycia żadnego przycisku lub stukania w sekcji. Będziemy także tworzyć losową sekcję „div” i wypełniamy ją dowolnym losowym kolorem po kliknięciu dowolnego obszaru strony HTML. Sugerujemy najpierw przeczytanie wyjaśnienia znacznika „ciała”, a następnie przejść przez tę sekcję wyjaśnienia strony HTML. Plik HTML rozpoczął się od znacznika stylu, aby pokolorować różne elementy HTML na tej stronie. Identyfikator „#Color” został użyty do ustawienia szerokości i wysokości „najmniejszego” wejścia „Div” odpowiednio na 10em i 6em. Rodzina czcionek nagłówka 1, nagłówka 4 i akapitu zostały ustawione na Sans-Serif. Tekst został wyrównany do centrum. Podczas gdy klasa „pudełka” została określona w celu ustawienia szerokości, wysokości, wyrównania i właściwości uzasadnienia dla drugiej sekcji „Div” odpowiednio do 100%, 33 VH, Center i Center. Stylizacja została tutaj wykonana:
'
W kodzie JavaScript tego pliku wywoływaliśmy funkcję „setInterval”, przekazując jej losowy kolor za pomocą funkcji „setColor” po każdym milisekund. Funkcja „SetColor” przyjmuje losowy kolor za pomocą funkcji „RandomeHexadecimalColorstring ()”, uzyskując identyfikator pierwszej sekcji „Div” i stosując losowy kolor na konkretnym „Div”. Funkcja „ChangeColor” została tutaj użyta do stworzenia szeregu kolorów i losowego wyboru jednego koloru z jej tablicy metodą „podłogową”.
Byłoby to zastosowane do wewnętrznej sekcji „Div” drugiego elementu „Div” ciała, aby losowo zmienić kolor pudełka „Div”. Funkcja „RGBCOLOR” została użyta do zainicjowania wartości kolorów czerwonych, zielonych i niebieskich podczas korzystania z poprzedniej funkcji „losowej liczby”.
Th RandomHexadecimalColorstring () Funkcja uzyskałaby wartość dla kombinacji czerwonej, zielonej i niebieskiej za pomocą funkcji „ToString” i „Padstart” i powróci do funkcji wywołania. ChangeColorrandomly () Funkcja znów używa RandomHexadecimalColorstring () funkcja zmiany koloru pudełka zgodnie z numerem koloru określonym przez identyfikator „Tekst”. Funkcja „ClickHandler” służy do losowej zmiany koloru pola po kliknięciu w dowolnym miejscu w sekcji.
Znacznik „Body” HTML zawiera styl inline do wyrównania tekstu. Zawiera centrum za pomocą właściwości „Aligację tekstu”. Mamy dwa główne elementy „div”, aby podzielić stronę na 2 sekcje. Pierwszy zawiera identyfikator „Auto” dla różnicowania, podczas gdy drugi zawiera klasę „pudełko”. Pierwsza sekcja „Div” zawiera tylko pojedynczy nagłówek rozmiaru 1 z unikalnym tytułem nagłówka. Druga sekcja „Div” zawiera inną „div”, która używa elementu „P” HTML do dodania akapitu 1 linii i elementu znacznika „wejścia”, aby uzyskać identyfikator koloru jako wejście i zmienić kolor tego „Div” według tego.
Wraz z tym nagłówek H4 tej sekcji „Div” użyłby identyfikatora „tekst”, aby losowo zmienić numer koloru przy każdym kliknięciu strony HTML. Zapiszmy i uruchommy następujący kod:
Pierwszy nagłówek zmieniłby jego kolor po każdym milisekund. Podczas klikania drugiej sekcji „Div” strony HTML, pole losowo zmieni kolor.
Wniosek
Chodzi o użycie prostych technik do losowej zmiany koloru niektórych elementów HTML bez ciężkiej pracy. W naszych przykładach próbowaliśmy objąć użycie funkcji „Pickcolor”, aby losowo wybrać jeden kolor z tablicy i zastosować go do konkretnego elementu. Próbowaliśmy zaimplementować funkcję setInterval (), aby natychmiastowa zmiana koloru określonego elementu bez stukania gdzieś na ekranie HTML, i.mi., Automatyczna zmiana koloru.