Colore casuale CSS
Esempio # 01
Iniziamo con il primo esempio di questo articolo dimostrando l'uso della semplice funzione di colore pick per generare colori casuali sugli elementi HTML. Questo codice di esempio è iniziato dal tag principale HTML seguito dal tag testa vuoto. Abbiamo usato il tag del corpo per definire gli elementi del corpo di questa pagina HTML, seguito dal tag di script contenente lo stile JavaScript per rendere questa pagina estetica e stile. Il testo del corpo è stato allineato al centro utilizzando la proprietà "allineate al testo" all'interno del tag in linea. Qui sono stati usati due titoli di taglia 1.
La prima intestazione utilizza lo stile in linea per colorare il verde usando la proprietà del colore. Mentre la seconda intestazione è stata specificata con l'ID "pick" e il tag di stile in linea per colorarlo in rosso per un po 'tramite la proprietà "Colore". Successivamente, il tag del pulsante viene utilizzato con l'attributo OnClick che ottiene il valore di restituzione dalla funzione "PickColor ()" per specificare quale colore deve essere visualizzato dopo aver toccato questo pulsante. Ecco che arriva il codice JavaScript per questo script HTML per renderlo dinamico. Contiene il tag di script seguito dall'uso della definizione della funzione per il metodo "PickColor". Questo metodo ha inizializzato un array "col" che ha preso diversi colori al suo interno, io.e., usando i numeri di colore specifici.
Un'altra variabile, "Random_Color", è stata usata per ottenere il colore casuale dall'array "Col" applicando le funzioni "pavimenti" e "casuali" della biblioteca matematica. Qualunque sia il valore del "pavimento", verrebbe usato per ottenere il colore casuale dall'indice specifico di questo array. L'ID "Scegli" di Intestazione 2 per questo file HTML è stato utilizzato per ottenere l'ID e salvato nella variabile "X". Successivamente, l'attributo di stile "colore" è stato applicato alla variabile "x" per la testa di colore casualmente 2 usando la variabile "casual_color". Questo è tutto su questo codice. Salviamolo ed eseguiamolo con il menu "Esegui".
L'uscita nel browser Chrome è mostrata nella seguente immagine. Mostra due titoli seguiti da un pulsante semplice. La prima intestazione è statica, mentre la seconda intestazione è stata utilizzata per cambiare casualmente il suo colore ogni volta che un utente tocca il pulsante.
Prima di toccare il pulsante, il colore dell'intestazione era rosso. Dopo aver toccato, risulta come mostrato di seguito, io.e., Arancione chiaro:
Toccando di nuovo il pulsante, il colore dell'intestazione diventa gialla.
Toccando il pulsante cambia ancora una volta il colore dell'intestazione in verde.
In questo modo, ogni tocco sul pulsante cambierebbe casualmente il colore di una voce, io.e., Blu, verde, giallo, ecc.
Esempio # 02
Iniziamo con l'esempio avanzato di modificare in modo casuale il colore di alcuni elementi dal file HTML. Abbiamo creato un file HTML che cambierà casualmente il colore di alcune intestazioni dopo ogni secondo senza usare alcun pulsante o toccare sulla sezione. Inoltre, creeremo una sezione "div" casuale e la riempiemo con qualsiasi colore casuale facendo clic su qualsiasi area della pagina HTML. Ti suggeriamo di leggere prima la spiegazione del tag "corpo" e poi passare attraverso questa sezione della spiegazione della pagina HTML. Il file HTML è iniziato con il tag di stile per colorare i diversi elementi HTML su questa pagina Web. L'ID "#Color" è stato utilizzato per impostare la larghezza e l'altezza dell'ingresso "più piccolo" "div" a 10em e 6em, rispettivamente. La famiglia di intestazione 1, intestazione 4 e paragrafo è stata impostata su sans-serif. Il testo è stato allineato al centro. Mentre è stata specificata la classe "Box" per impostare la larghezza, l'altezza, gli elementi di allineamento e la proprietà del contenuto di giustificazioni per la seconda sezione "Div" al 100%, 33vh, al centro e al centro, rispettivamente. Lo stile è stato fatto qui:
'
All'interno del codice JavaScript di questo file, abbiamo chiamato la funzione "setInterval" passandolo un colore casuale con l'aiuto di una funzione "setColor" dopo ogni millisecondo. La funzione "setColor" ha preso il colore casuale usando la funzione "RandomeHexadeCimalColorstring ()", ottenendo l'ID della prima sezione "Div" e applicando il colore casuale sul particolare "Div". La funzione "ChangeColor" è stata usata qui per creare una serie di colori e scegliere casualmente un colore dal suo array con un metodo "pavimento".
Questo sarebbe applicato alla sezione "div" interiore del secondo elemento "div" del corpo per cambiare casualmente il colore di una casella "div". La funzione "RGBColor" è stata utilizzata per inizializzare il valore per i colori rosso, verde e blu durante l'utilizzo della precedente funzione "casuale".
Th casualHexadeCimalColorstring () La funzione sarebbe ottenere il valore per la combinazione rossa, verde e blu usando la funzione "toString" e "padstart" e tornare alla sua funzione di chiamata. IL ChangeColorRandomly () La funzione sta di nuovo usando il file casualHexadeCimalColorstring () funzione per modificare il colore di una casella in base al numero di colore specificato dall'ID "testo". La funzione "ClickHandler" viene utilizzata per modificare casualmente il colore di una casella quando viene cliccata ovunque nella sezione.
Il tag "corpo" HTML contiene lo stile in linea per allineare il testo. Contiene il centro tramite l'uso della proprietà "allineate di testo". Abbiamo due principali elementi "div" per dividere la pagina in 2 sezioni. Il primo contiene l'ID "auto" per la differenziazione, mentre l'altro contiene la classe "Box". La prima sezione "Div" contiene solo una singola intestazione della dimensione 1 con il suo titolo di intestazione unico. L'altra sezione "Div" contiene un altro "div" che ha utilizzato l'elemento HTML "P" per aggiungere il paragrafo di 1 riga e l'elemento tag "input" per ottenere l'ID colore come input e modificare il colore di questo "Div" secondo quello.
Insieme a ciò, l'intestazione H4 di questa sezione "Div" userebbe l'ID "testo" per modificare casualmente il numero di colore ad ogni clic sulla pagina HTML. Salviamo ed eseguiamo il seguente codice:
La prima intestazione cambierebbe il suo colore dopo ogni millisecondo. Mentre fa clic sulla seconda sezione "Div" della pagina HTML, la casella cambierà anche il suo colore in modo casuale.
Conclusione
Si tratta di usare tecniche semplici per cambiare casualmente il colore di alcuni elementi HTML senza un duro lavoro. Nei nostri esempi, abbiamo cercato di coprire l'uso della funzione "PickColor" per scegliere in modo casuale un colore da un array e applicarlo all'elemento specifico. Abbiamo tentato di implementare la funzione setInterval () per modificare istantaneamente il colore di un elemento specifico senza toccare da qualche parte sullo schermo HTML, i.e., cambio di colore automatico.