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

Tutorial zur Installation der Dekomprimierungsversion von MySQL 8.0.12

Verwenden Sie den Crontab-Befehl in der Linux-Umgebung, um geplante periodische Ausführungsaufgaben einzurichten [einschließlich PHP-Ausführungscode].

Artikel

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

Tutorial zur Installation der Dekomprimierungsversion von MySQL 8.0.12

So richten Sie den Ziellink eines Tags auf ein Iframe

Zusammenfassung der grundlegenden Wissenspunkte der Linux-Gruppe

Ändern des Standard-Bildlaufleistenstils im Front-End-Projekt (Zusammenfassung)

Realisieren Sie einen super coolen Wasserlichteffekt auf Leinwandbasis

So leiten Sie eine PC-Adresse in Vue an eine Mobiladresse um

VMware Workstation 12 installiert Ubuntu 14.04 (64 Bit)

Erfahrung in der Gestaltung einer mehrschichtigen Benutzeroberfläche im Webdesign

MySQL ermöglicht langsame Abfragen (Einführung in die Verwendung der EXPLAIN-SQL-Anweisung)

Verwenden Sie den Crontab-Befehl in der Linux-Umgebung, um geplante periodische Ausführungsaufgaben einzurichten [einschließlich PHP-Ausführungscode].

Artikel empfehlen

So konfigurieren Sie einen Pfadalias für das React-Scaffolding

Detaillierte Erläuterung mehrerer Beispiele für Insert- und Batch-Anweisungen in MySQL

Drei Beispiele für Node.js-Methoden zum Abrufen von Formulardaten

Lösen Sie das Problem, dass ifconfig und addr die IP-Adresse in Linux nicht sehen können

Design-Tipps: Wir glauben, es wird Ihnen gefallen

Verlustfreie Erweiterungsmethode unter Linux

So legen Sie Hintergrundfarbe und Transparenz in Vue fest

Der Unterschied zwischen HTML-Iframe und Frameset_PowerNode Java Academy

Der Prozess der JDK-Installation und Konfiguration von Umgebungsvariablen unter WIN10 (detaillierte Version)

Das WeChat-Applet zeichnet die Bewegungsbahn des Benutzers auf

Detaillierte Erläuterung der CSS-Randüberlappung und Lösungssuche

Detaillierte Erklärung des Linux-Kernel-Makros Container_Of

MySQL-Datenbank implementiert OLTP-Benchmark-Test basierend auf Sysbench

Fragen zum Vorstellungsgespräch zu JS 9 Promise

Detaillierte Verwendung des Docker-Maven-Plugins