CSS tilfeldig farge
Eksempel nr. 01
La oss komme i gang med det første eksemplet på denne artikkelen ved å demonstrere bruken av den enkle plukkefargefunksjonen for å generere tilfeldige farger på HTML -elementer. Denne eksemplet startet fra HTML -hovedmerket etterfulgt av den tomme hodemerket. Vi har brukt Body -taggen for å definere kroppselementene på denne HTML -siden, etterfulgt av skriptetoden som inneholder JavaScript -styling for å gjøre denne siden estetisk og stylet. Kroppsteksten har blitt tilpasset senteret ved hjelp av den "tekst-align" egenskapen i inline-stilkoden. To overskrifter i størrelse 1 har blitt brukt her.
Den første overskriften bruker inline styling for å fargelegge grønn ved hjelp av fargeegenskapen. Mens den andre overskriften har blitt spesifisert med ID “Pick” og Inline Styling -taggen for å fargelegge den rødt en stund via “Color” -egenskapen. Etter dette brukes knappekoden med OnClick -attributtet som får returverdien fra "PickColor ()" -funksjonen for å spesifisere hvilken farge som må vises når du trykker på denne knappen. Her kommer JavaScript -koden for dette HTML -skriptet for å gjøre det dynamisk. Den inneholder skriptetoden etterfulgt av bruk av funksjonsdefinisjon for "PickColor" -metoden. Denne metoden har initialisert en matrise “col” som tar forskjellige farger i den, i.e., Bruke de spesifikke fargetallene.
En annen variabel, "Random_Color", har blitt brukt for å få den tilfeldige fargen fra "COL" -arrayen ved å bruke "gulvet" og "tilfeldige" funksjoner i matematikkbiblioteket. Uansett hva "gulv" -verdien er beregnet, vil den bli brukt for å få den tilfeldige fargen fra den spesifikke indeksen for denne matrisen. ID "plukket" av overskrift 2 for denne HTML -filen har blitt brukt for å få ID og lagret til variabelen "x". Etter det ble stilattributtet “farge” brukt på variabelen “x” for å tilfeldig farge overskrift 2 ved å bruke "random_color" -variabelen. Dette er det om denne koden. La oss lagre den og kjøre den med "Kjør" -menyen.
Utgangen i Chrome -nettleseren vises i følgende bilde. Den viser to overskrifter etterfulgt av en enkel knapp. Den første overskriften er statisk, mens den andre overskriften har blitt brukt til å endre fargen tilfeldig hver gang en bruker tapper på knappen.
Før du tappet på knappen, var fargen på overskriften rød. Etter å ha tappet på den, viser det seg som vist nedenfor, jeg.e., Lys oransje:
Igjen tapping på knappen, fargen på overskriften blir gul.
Tapping på knappen endrer nok en gang fargen på overskriften til grønt.
Som dette, vil hvert trykk på knappen tilfeldig endre fargen på en overskrift, i.e., blå, grønn, gul osv.
Eksempel # 02
La oss komme i gang med det avanserte eksemplet på tilfeldig å endre fargen på et element fra HTML -filen. Vi har laget en HTML -fil som tilfeldig vil endre fargen på noen overskrifter etter hvert sekund uten å bruke noen knapp eller tappe på seksjonen. Vi oppretter også en tilfeldig "div" -seksjon og fyller den med en hvilken som helst tilfeldig farge når du klikker på et hvilket som helst område på HTML -siden. Vi foreslår at du først leser forklaringen på “Body” -koden først og deretter gå gjennom denne delen av HTML -sidenforklaringen. HTML -filen startet med stilkoden for å fargelegge de forskjellige HTML -elementene på denne websiden. "#Color" - - --et har blitt brukt til å sette bredden og høyden på henholdsvis "minste" inngang "div" til 10EM og 6EM. Overskriften 1, overskrift 4 og avsnitt Font-familien er satt til Sans-serif. Teksten er på linje med sentrum. Mens "Box" -klassen er spesifisert for å angi bredde, høyde, justerte elementer og rettferdiggjøringseiendom for den andre "Div" -delen til henholdsvis 100%, 33VH, sentrum og sentrum. Stylingen er gjort her:
'
Innen JavaScript -koden til denne filen har vi kalt "setinterval" -funksjonen ved å gi den en tilfeldig farge ved hjelp av en "setcolor" -funksjon etter hvert millisekunder. Funksjonen “SetColor” har tatt den tilfeldige fargen ved å bruke "RandomeHexadecimalColorString ()" -funksjonen, få IDen til den første "div" -delen og bruke den tilfeldige fargen på den spesielle "div". Funksjonen “ChangeColor” har blitt brukt her for å lage en rekke farger og velg tilfeldig en farge fra sin matrise med en "gulv" -metode.
Dette vil bli brukt på den indre "div" -delen av det andre "div" -elementet i kroppen for å tilfeldig endre fargen på en "div" -boks. Funksjonen "RGBColor" har blitt brukt til å initialisere verdien for røde, grønne og blå farger mens du bruker den forrige "randomNumber" -funksjonen.
Th randomhexadecimalcolorString () Funksjonen vil være å få verdien for den røde, grønne og blå kombinasjonen ved hjelp av "toString" og "padstart" -funksjonen og gå tilbake til dens anropsfunksjon. De ChangeColorrandomly () Funksjon bruker igjen randomhexadecimalcolorString () Funksjon for å endre fargen på en boks i henhold til fargenummeret som er spesifisert av ID "-teksten". "ClickHandler" -funksjonen brukes til å endre fargen på en boks tilfeldig når du klikker på hvor som helst i seksjonen.
HTML “Body” -koden inneholder inline styling for å justere teksten. Den inneholder senteret via bruk av egenskapen "tekst-align". Vi har to viktigste "div" -elementer for å dele siden i 2 seksjoner. Den første inneholder ID “Auto” for differensiering, mens den andre inneholder klassen “Box”. Den første "div" -delen inneholder bare en enkelt overskrift av størrelse 1 med sin unike overskriftstittel. Den andre "div" -delen inneholder en annen "div" i den som har brukt “P” HTML -elementet for å legge til avsnittet til 1 linje og “Input” -taggenelementet for å få farge -ID som input og endre fargen på dette “Div” i henhold til det.
Sammen med det vil H4 -overskriften til denne "Div" -delen bruke ID "-teksten" for å tilfeldig endre fargenummeret med hvert klikk på HTML -siden. La oss lagre og kjøre følgende kode:
Den første overskriften ville endre fargen etter hvert millisekunder. Mens du klikker på HTML -sidens andre "Div" -seksjon, vil boksen også endre fargen tilfeldig.
Konklusjon
Dette handler om å bruke enkle teknikker for å tilfeldig endre fargen på noen HTML -elementer uten hardt arbeid. I eksemplene våre har vi prøvd å dekke bruken av "pickcolor" -funksjonen for å tilfeldig velge en farge fra en matrise og bruke den på det spesifikke elementet. Vi har forsøkt å implementere funksjonen SetInterval () for å endre fargen på et spesifikt element uten å tappe et sted på HTML -skjermen, i.e., Automatisk fargeendring.