JavaScript implementiert das Ändern der Farbe einer Webseite über einen Schieberegler

JavaScript implementiert das Ändern der Farbe einer Webseite über einen Schieberegler

Hallo zusammen, als ich mir heute das HTML des Web-Frontends ansah, sah ich, dass auf der Seite ein Schieberegler angezeigt wurde, wenn das Typattribut des Eingabetags „Bereich“ war. Ich fragte mich plötzlich, ob ich die Farbe der Webseite durch Verschieben ändern könnte. Jetzt zeige ich Ihnen, wie Sie die Farbe einer Webseite mithilfe eines Schiebereglers ändern.

Zunächst müssen wir wissen, wie man Farben ausdrückt. Es gibt vier Möglichkeiten, Farben auszudrücken:

1. Verwenden Sie den Farbnamen, um die Farbe anzugeben: Rot, Grün usw.

2. Verwenden Sie # plus Hexadezimalzahl: #FF0000/#F00 für Rot, #00FF00/#0F0 für Grün usw.

3. Verwenden Sie den RGB-Wert: rgb(0,0,0) für Schwarz, rgb(255,255,255) für Weiß usw.

4. Ausgedrückt durch den RGBA-Wert: RGBA (0,0,0,0,5) halbtransparentes Schwarz, RGBA (255,0,0,.5) halbtransparentes Rot (der a-Wert steht für Transparenz)

Ich verwende RGB-Werte zur Darstellung von Farben. Die Wertebereiche von r, g und b liegen alle zwischen 0 und 255.

Die Einstellungen des Schiebereglers im Hauptteil: max ist der Maximalwert, min ist der Minimalwert, step ist der Schrittwert, und es gibt auch ein Werteattribut, das standardmäßig auf den mittleren Wert eingestellt ist

<body id="box">
<label for="r">r-Wert</label>
<Eingabetyp="Bereich" max="255" min="0" Schritt="1" id="r">
<label for="g">g-Wert</label>
<Eingabetyp="Bereich" max="255" min="0" Schritt="1" id="g">
<label for="b">b-Wert</label>
<Eingabetyp="Bereich" max="255" min="0" Schritt="1" id="b">
</body>

JavaScript: Legen Sie für jeden Slider ein Änderungsereignis fest, das ausgeführt wird, wenn sich der Slider-Wert ändert.

<Skript>
    //Funktion zum Abrufen eines Elements anhand der ID-Funktion $(id) {
        gibt document.getElementById(id) zurück;
    }
    //Wert jedes Schiebereglers abrufen let r = $('r').value
    sei g = $('g').Wert
    sei b = $('b').Wert
    //Element nach ID abrufen let box = $('box')
    //Hintergrundfarbe der Webseite festlegen box.style.background = 'rgb(' + r + ',' + g + ',' + b + ')';
    //Ereignisse für den R-Wert-Schieberegler festlegen$('r').addEventListener("change", function () {
        r = dieser.Wert;
        box.style.background = 'rgb(' + r + ',' + g + ',' + b + ')';
    })
    //Ereignisse für den g-Wert-Schieberegler festlegen $('g').addEventListener("change", function () {
        g = dieser.Wert;
        box.style.background = 'rgb(' + r + ',' + g + ',' + b + ')';
    })
    //Setze das Ereignis für den B-Wert-Schieberegler $('b').addEventListener("change", function () {
        b = dieser.Wert
        box.style.background = 'rgb(' + r + ',' + g + ',' + b + ')';
    })
</Skript>

Natürlich gibt es auch eine Möglichkeit, die Farbe im Eingabefeld zu ändern

<Eingabetyp="Farbe" onchange="document.body.style.backgroundColor=dieser.Wert">

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • JavaScript-Datenvisualisierung: ECharts-Kartenerstellung
  • Super detaillierte grundlegende JavaScript-Syntaxregeln
  • Detaillierte Erklärung der obligatorischen und impliziten Konvertierung von Typen in JavaScript
  • Detaillierte Erklärung der Unterschiede zwischen var, let und const in JavaScript es6
  • Detaillierte Erklärung des this-Zeigeproblems in JavaScript
  • Fallstudie zu JavaScript-Funktionsaufrufen, Apply- und Bind-Methoden
  • Detaillierte Erklärung zur Verwendung des Arguments-Objekts in JavaScript
  • Beispiel für die JavaScript-Funktion „CollectGarbage“
  • Detaillierte Erklärung von BOM und DOM in JavaScript
  • Erläuterung der Anwendungsfälle von JavaScript setTimeout und setTimeinterval
  • JavaScript-Timer zur Realisierung einer zeitlich begrenzten Flash-Sale-Funktion
  • JavaScript zum Implementieren einer zeitlich begrenzten Flash-Sale-Funktion
  • JavaScript-Objekte (Details)

<<:  Studiennotizen zur MySQL Master-Slave-Konfiguration

>>:  So installieren Sie Docker und konfigurieren Alibaba Cloud Image Accelerator

Artikel empfehlen

Bei der Installation von MySQL5.7.18winX64 unter Windows 10 konnte der Server nicht gestartet werden und es wurde keine Fehlermeldung angezeigt.

Systemumgebung: Win10 64-bit MySQL-Version: mysql...

Eine kurze Diskussion zum Problem, dass der Text in der Schaltfläche im Kompatibilitätsmodus des Browsers nicht vertikal zentriert ist

XML/HTML-CodeInhalt in die Zwischenablage kopiere...

Verstehen Sie einfach die Unterschiede in den Prinzipien gängiger SQL-Delete-Anweisungen

In diesem Artikel werden hauptsächlich die Unters...

HTML realisiert Hotel-Screening-Funktion über Formular

<!doctype html> <html xmlns="http:/...

Beispiel für die Verwendung von CSS3 zum Erzielen eines glänzenden Schrifteffekts beim Entsperren eines Apple-Telefons

0. Einleitung 18. August 2016 Heute ist mir aufge...

30 Minuten, um Ihnen ein umfassendes Verständnis von React Hooks zu vermitteln

Inhaltsverzeichnis Überblick 1. useState 1.1 Drei...

MySQL implementiert Zeichenfolgenverkettung, Abfangen, Ersetzen und Positionssuchvorgänge

MySQL-Zeichenfolgenverkettung, -Abfangen, -Ersetz...

Verwendung der VUE-Renderfunktion und ausführliche Erklärung

Inhaltsverzeichnis Vorwort Die Rolle des Renders ...

Implementierung der MySQL-Datentypkonvertierung

1. Problem Es gibt eine Tabelle wie unten gezeigt...

Detailliertes Tutorial zur Installation von MySQL 8.0.12 unter Windows

In diesem Artikel finden Sie eine ausführliche An...

Lösung für das Problem der Nullspalte in der NOT IN-Füllgrube in MySQL

Als ich vor einiger Zeit an einer kleinen Funktio...

So installieren Sie die grafische Benutzeroberfläche unter Linux

1. Linux-Installation (Root-Benutzerbetrieb) 1. I...

So schreiben Sie schönen HTML-Code

So sieht schöner HTML-Code aus. So schreiben Sie ...

Implementierung von Linux-Dateisystemvorgängen

In dieser Lesenotiz werden hauptsächlich die Vorg...

Stellen Sie einen Varnish-Cache-Proxyserver basierend auf Centos7 bereit

1. Lackübersicht 1. Einführung in Varnish Varnish...