CSS zufällige Farbe

Farben und Animationen werden häufig auf Websites verwendet, die von HTML Scripting erstellt wurden, um sie angenehmer und ästhetischer zu machen. Manchmal veränderte sich diese Farben schnell bei einem Element von HTML. Dies würde aufgrund der Verwendung von "setInterval" -Funktionen passieren. Einige von Ihnen haben vielleicht darüber nachgedacht, die Farben von HTML -Elementen beim HTML -Skripten zufällig zu ändern. Sie haben vielleicht über eine reine Art und Weise nachgedacht, konnten aber die Lösung nicht finden. Wenn ja, soll dieser Artikel über Expertise über die Änderung der Farbe eines Elements von HTML zu gewinnen, das zufällig verändert wird.

Beispiel # 01

Beginnen wir mit dem ersten Beispiel dieses Artikels, indem wir die Verwendung der einfachen Pick -Farbfunktion demonstrieren, um zufällige Farben für HTML -Elemente zu erzeugen. Dieser Beispielcode wurde vom HTML -Haupt -Tag gefolgt vom leeren Kopf -Tag gestartet. Wir haben das Body -Tag verwendet, um die Körperelemente dieser HTML -Seite zu definieren, gefolgt von dem Skript -Tag, das das JavaScript -Styling enthält, um diese Seite ästhetisch und gestylt zu machen. Der Körpertext wurde mit der Eigenschaft „Text-Align“ im Inline-Stil-Tag an der Mitte ausgerichtet. Hier wurden zwei Überschriften der Größe 1 verwendet.

Die erste Überschrift verwendet das Inline -Styling, um sich mit der Farbeigenschaft grün zu färben. Während die zweite Überschrift mit dem ID „Pick“ und dem Inline -Styling -Tag für eine Weile über die Eigenschaft „Farbe“ angegeben wurde, um es rot zu färben. Danach wird das Schaltflächen -Tag verwendet, wobei das Onclick -Attribut den Rückgabewert aus der Funktion „pickColor ()“ erhält, um anzugeben, welche Farbe beim Tippen auf diese Schaltfläche angezeigt werden muss. Hier kommt der JavaScript -Code für dieses HTML -Skript, um es dynamisch zu machen. Es enthält das Skript -Tag, gefolgt von der Verwendung der Funktionsdefinition für die Methode „pickColor“. Diese Methode war die Initialisierung eines Array -„Col“, der verschiedene Farben darin nimmt, ich.e., Verwenden der spezifischen Farbnummern.

Eine andere Variable, "Random_Color". Was auch immer der „Boden“ -Wert berechnet wurde, er würde verwendet, um die zufällige Farbe aus dem spezifischen Index dieses Arrays zu erhalten. Die ID "Auswahl" von Heading 2 für diese HTML -Datei wurde verwendet, um die ID zu erhalten und in der Variablen "x" gespeichert zu werden. Danach wurde das Style -Attribut "Farbe" auf die Variable "x" angewendet, um mit der Variablen "random_color" zufällig farbüberschriften 2 zu färben. Das ist es mit diesem Code. Sparen wir es und führen Sie es mit dem Menü "Run" aus.

Der Ausgang im Chrombrowser wird im folgenden Bild angezeigt. Es zeigt zwei Überschriften, gefolgt von einer einfachen Taste. Die erste Überschrift ist statisch, während die zweite Überschrift verwendet wurde, um seine Farbe nach dem Zufallsprinzip zu ändern, wenn ein Benutzer auf die Taste tippt.

Vor dem Tippen auf die Taste war die Farbe der Überschrift rot. Nachdem ich darauf getippt hatte, stellt es sich wie unten gezeigt heraus, ich.e., hell orange:

Noch einmal auf die Taste tippen, wird die Farbe der Überschrift gelb gelb.

Wenn Sie auf die Taste tippen, wird die Farbe der Überschrift erneut auf Grün geändert.

So würde jeder Tippen auf der Schaltfläche zufällig die Farbe einer Überschrift verändern, ich.e., blau, grün, gelb usw.

Beispiel # 02

Beginnen wir mit dem erweiterten Beispiel, um die Farbe eines Elements aus der HTML -Datei zufällig zu ändern. Wir haben eine HTML -Datei erstellt, die die Farbe einiger Überschriften nach jeder Sekunde zufällig ändert, ohne dass eine Schaltfläche verwendet wird oder auf den Abschnitt tippt. Außerdem erstellen wir einen zufälligen Abschnitt „Div“ und füllen ihn mit einer zufälligen Farbe, wenn Sie auf einen beliebigen Bereich der HTML -Seite klicken. Wir empfehlen, zuerst die Erklärung für das Tag „Body“ zu lesen und dann diesen Abschnitt der HTML -Seite Erklärung durchzuführen. Die HTML -Datei wurde mit dem Style -Tag gestartet, um die verschiedenen HTML -Elemente auf dieser Webseite zu färben. Die ID „#Color“ wurde verwendet, um die Breite und Höhe des "kleinsten" Eingangs "Div" auf 10EM bzw. 6EM zu setzen. Die Überschrift 1, Überschrift 4 und Absatzschriftfamilie wurden auf Sans-Serif eingestellt. Der Text wurde auf das Zentrum ausgerichtet. Während die „Box“ -Klasse angegeben wurde, um die Breite, Höhe, Höhe, Ausrichtung und Justify-In-In-In-In-In-In-In-Intensiva-Eigenschaft für den zweiten Abschnitt „Div“ auf 100%, 33 VH, Zentrum und Zentrum festzulegen. Das Styling wurde hier gemacht:

''

Innerhalb des JavaScript -Code dieser Datei haben wir die Funktion „setInterval“ aufgerufen, indem wir sie mit Hilfe einer "setColor" -Funktion nach jeder Millisekunden eine zufällige Farbe übergeben haben. Die Funktion "setColor" hat die zufällige Farbe unter Verwendung der Funktion "RandomehexadecimalcolorString ()", die ID des ersten Abschnitts "Div" abgerufen und die zufällige Farbe auf das jeweilige "Div" angewendet, erstellt, die ID des ersten Abschnitts „Div“ anwendet. Die Funktion „ChangeColor“ wurde hier verwendet, um ein Array von Farben zu erstellen und nach einer „Boden“ -Methode zufällig eine Farbe aus ihrem Array auszuwählen.

Dies würde auf den inneren Abschnitt „Div“ des zweiten „DIV“ des Körpers angewendet, um die Farbe einer „Div“ -Box zufällig zu ändern. Die Funktion „RGBColor“ wurde verwendet, um den Wert für rot, grün und blaue Farben zu initialisieren, während die vorherige Funktion „RandomNumber“ verwendet wird.

Th randomhexadecimalcolorString () Die Funktion würde darin bestehen, den Wert für die rot, grün und blaue Kombination mit der Funktion „ToString“ und „Padstart“ zu erhalten und zu seiner Aufruffunktion zurückzukehren. Der ChangeColorrandomly () Funktion verwendet wieder die randomhexadecimalcolorString () Funktionieren Sie die Farbe eines Feldes gemäß der durch die ID „Text“ angegebenen Farbnummer. Die Funktion „ClickHandler“ wird verwendet, um die Farbe eines Feldes zufällig zu ändern, wenn Sie auf irgendwo im Abschnitt klicken.

Das HTML -Tag "Body" enthält das Inline -Styling, um den Text auszurichten. Es enthält das Zentrum über die Verwendung der Eigenschaft „Text-Align“. Wir haben zwei Hauptelemente "Div", um die Seite in 2 Abschnitte zu unterteilen. Der erste enthält die ID „Auto“ zur Differenzierung, während der andere die Klasse „Box“ enthält. Der erste Abschnitt „Div“ enthält nur eine einzelne Überschriften von Größe 1 mit seinem einzigartigen Überschriftentitel. Der andere Abschnitt "Div" enthält ein weiteres "DIV", das das HTML -Element "P" verwendet hat, um den Absatz der 1 -Zeile und das "Eingabe" -Tagelement hinzuzufügen, um die Farb -ID als Eingabe zu erhalten und die Farbe dieser zu ändern "Div" danach.

Zusammen mit diesem würde die H4 -Überschrift dieses Abschnitts „Div“ die ID „Text“ verwenden, um die Farbnummer zufällig zu ändern, wobei jeder Klick auf die HTML -Seite klickt. Lassen Sie uns den folgenden Code speichern und ausführen:

Die erste Überschrift würde seine Farbe nach jeder Millisekunde verändern. Während des Klickens auf den zweiten Abschnitt "Div" der HTML -Seite ändert das Feld auch die Farbe zufällig.

Abschluss

Hier geht es darum, einfache Techniken zu verwenden, um die Farbe einiger HTML -Elemente ohne harte Arbeit zufällig zu ändern. In unseren Beispielen haben wir versucht, die Verwendung der Funktion „pickColor“ abzudecken, um zufällig eine Farbe aus einem Array auszuwählen und auf das spezifische Element anzuwenden. Wir haben versucht, den Funktionsetinterval () zu implementieren, um die Farbe eines bestimmten Elements sofort zu ändern, ohne irgendwo auf dem HTML -Bildschirm zu tippen.e., automatische Farbänderung.