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

Tiefes Verständnis des Mechanismus des CSS-Hintergrund-Blend-Modus

Detaillierte Erläuterung des Problems, dass die Synchronisierung des Warehouse-Cache nach dem Ändern der Yum-Quelle in CentOS8 fehlschlägt

Artikel

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

Tiefes Verständnis des Mechanismus des CSS-Hintergrund-Blend-Modus

Ein Beispiel für die Implementierung einer einfachen Fingerklick-Animation mit CSS3 Animation

So implementieren Sie Docker Registry zum Erstellen eines privaten Image Warehouse

Beispiel für eine MySQL-DML-Sprachoperation

So erstellen Sie schnell MySQL Master-Slave mit mysqlreplicate

Docker verwendet Git, um den detaillierten Prozess der Jenkins-Release- und Testprojekte zu implementieren

MySQL partitioniert vorhandene Tabellen in der Datentabelle

Detaillierte Erklärung zur Verwendung von Bussen in Vue

Detaillierte Erläuterung des Problems, dass die Synchronisierung des Warehouse-Cache nach dem Ändern der Yum-Quelle in CentOS8 fehlschlägt

Artikel empfehlen

Zusammenfassung der Vorteile von Vue3 gegenüber Vue2

Analyse und Lösung eines Fehlalarmproblems bei der langsamen MySQL-Protokollüberwachung

js implementiert das Hinzufügen und Entfernen von Warenkörben sowie die Preisberechnung

Lösung für gelegentliche Abstürze des Positionierungs-Hintergrunddienstes unter Linux

Beispielanalyse der Verwendung gespeicherter MySQL-Prozeduren

MySQL 8.0.13 Download- und Installations-Tutorial mit Bildern und Text

MySQL-8.0.26 Konfigurationsgrafik-Tutorial

So deaktivieren Sie Webseitenstile mit dem Webentwickler von Firefox

Detaillierter Prozess zur Implementierung des 2048-Minispiels im WeChat-Applet

Tutorial zu HTML-Formular-Tags (4):

Mysql Sql-Anweisungsübungen (50 Fragen)

Lösung für Nginx-Installationsfehler

Zusammenfassung einiger gängiger Möglichkeiten zum Abkürzen von Javascript-Code

Praktische Funktionsweise der Verwendung beliebiger Schriftarten auf einer Webseite mit Demonstration

Deaktivieren Sie die IE-Bildsymbolleiste