Verwenden von js zum Implementieren eines einfachen Lichtschaltercodes

Verwenden von js zum Implementieren eines einfachen Lichtschaltercodes

Körperteil:

<button>Licht ein-/ausschalten</button>

Skriptteil:

    <Skript>

        // window.onload ist das Fensterladeereignis, mit dem Code in das Element geschrieben werden kann window.addEventListener('load', function () {

            var btn = document.querySelector('Schaltfläche');

            // Definieren Sie eine Variable, um zu bestimmen, ob das Licht an oder aus ist. var flag = 0;

            btn.onclick = Funktion () {

                wenn (Flagge == 0) {

                    document.body.style.backgroundColor = "schwarz";

                    Flagge = 1;

                } anders {

                    Dokument.Body.Style.BackgroundColor = "pink";

                    Flagge = 0;

                }

            }

        })

    </Skript>

Wenn script direkt unter button geschrieben wird,

Verwenden Sie dann den folgenden Code:

<Skript>

        var btn = document.querySelector('Schaltfläche');

        Var-Flagge = 0;

        btn.onclick = Funktion () {

            wenn (Flagge == 0) {

                document.body.style.backgroundColor = "schwarz";

                Flagge = 1;

            } anders {

                Dokument.Body.Style.BackgroundColor = "pink";

                Flagge = 0;

            }

        }

    </Skript>
 

Dies ist das Ende dieses Artikels über die Verwendung von JS zur Implementierung von einfachem Lichtschaltercode. Weitere relevante Inhalte zu JS zur Implementierung von einfachem Lichtschalter finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • js, um den Effekt des Lichtschaltens zu erzielen
  • Beispiel für das Umschalten einer Glühbirne durch Klicken auf einen mit JavaScript implementierten Spezialeffekt
  • JS/jQuery zum Erreichen eines einfachen Lichtschaltereffekts [Fall]

<<:  Erläutern Sie die Bereitstellung und Konfiguration des Clickhouse Docker-Clusters anhand von Beispielen.

>>:  Zusammenfassung eines CSS-Codes, der die gesamte Site grau macht

Artikel empfehlen

Einführung in den Prozess zum Erstellen einer TCP-Verbindung im Linux-System

Inhaltsverzeichnis Schritte zum Erstellen von TCP...

IIS7~IIS8.5 Löschen oder Ändern des Serverprotokollheaders Server

Anforderungen: Entfernen Sie HTTP-Antwortheader i...

So überwachen Sie globale Variablen im WeChat-Applet

Ich bin kürzlich bei der Arbeit auf ein Problem g...

Eine kurze Analyse des Unterschieds zwischen statisch und selbst in PHP-Klassen

Verwenden Sie self:: oder __CLASS__, um eine stat...

Implementierung von Wasserfall-Layout + dynamischem Rendering

Inhaltsverzeichnis Typische Wasserfall-Website Wa...

Implementierungsmethode und Beispielcode des Tomcat-Klassenladers

Tomcat definiert intern mehrere ClassLoader, soda...

Der Unterschied zwischen Vue-Interpolationsausdruck und V-Text-Direktive

Inhaltsverzeichnis 1. Verwenden Sie Plugin-Ausdrü...

Die Vollversion des gängigen Linux-Tools vi/vim

Warum Vim lernen? Linux verfügt über eine große A...

Ein Problem mit der Bereitstellung von MySQL 5.5

MySQL-Bereitstellung Derzeit stellt das Unternehm...