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

Ein Beispiel für die Umstellung der traditionellen Replikation auf GTID-Replikation ohne Geschäftsunterbrechung in MySQL 5.7

Artikel

Tutorial zur Installation von Ubuntu Server in Vmware

Verwenden Sie HTML+Css, um eine einfache Navigationsleistenfunktion zu implementieren (die Navigationsleiste ändert die Hintergrundfarbe, wenn die Maus darauf stößt).

Artikel

Implementierung eines Web-Rechners auf Basis von JavaScript

Artikel

Verbesserungen am Webserver zur Verbesserung der Website-Leistung

Artikel

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

Ein Beispiel für die Umstellung der traditionellen Replikation auf GTID-Replikation ohne Geschäftsunterbrechung in MySQL 5.7

Tutorial zur Installation von Ubuntu Server in Vmware

So überwachen und löschen Sie abgelaufene Sitzungen in Tomcat

Detaillierte Erklärung der MySql-Installation und des Logins

So übertragen Sie Dateien zwischen Windows und Linux

CSS zur Realisierung der Einzelauswahl-Faltmenüfunktion

Detaillierte Erklärung häufig verwendeter CSS-Stile (Layout)

Verwenden Sie HTML+Css, um eine einfache Navigationsleistenfunktion zu implementieren (die Navigationsleiste ändert die Hintergrundfarbe, wenn die Maus darauf stößt).

Implementierung eines Web-Rechners auf Basis von JavaScript

Verbesserungen am Webserver zur Verbesserung der Website-Leistung

Artikel empfehlen

html-Seite!--[if IE]...![endif]--Detaillierte Einführung in die Verwendung

Erfahrungsaustausch über die Priorität des Ladens von CSS-Stilen

Erstellen einer verteilten Selenium-Umgebung basierend auf Docker

So mounten Sie eine Festplatte in Linux

Beispielanalyse der Ausführungsreihenfolge und Schreibreihenfolge von MySQL-Anweisungen

Detaillierte Erläuterung der Persistenz des Vue-Seitenstatus

Was sind die Vorteile einer semantischen HTML-Struktur?

Verwenden Sie @font-face, um Sonderzeichen auf Webseiten zu implementieren (benutzerdefinierte Schriftarten erstellen)

Einfaches Anwendungsbeispiel für MySQL-Trigger

Eine kurze Erläuterung des Datums-/Uhrzeitformats beim Exportieren von Tabellendaten von MySQL nach Excel

Warum funktioniert Ihre Größe: 100 % nicht?

React tsx generiert einen zufälligen Bestätigungscode

So veröffentlichen Sie ein lokal erstelltes Docker-Image auf Dockerhub

js verwendet Canvas, um mehrere Bilder in einem Implementierungscode zusammenzuführen

So zeigen Sie die Erstellungszeit von Dateien in Linux an