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

Analyse mehrerer Situationen, in denen der MySQL-Index fehlschlägt

1. Prinzip des besten linken Präfixes – Wenn mehr...

Der Unterschied zwischen this.$router und this.$route in Vue und der push()-Methode

Im offiziellen Dokument heißt es: Durch Einfügen ...

CSS3 zum Erzielen eines dynamischen Hintergrundverlaufseffekts

Beim Erlernen von CSS3 geht es mehr darum, sich m...

HTML-Cellpadding- und Cellspacing-Attribute in Bildern erklärt

Zelle -- der Inhalt der Tabelle Zellenrand (Tabell...

So implementieren Sie verteilte Transaktionen in MySQL XA

Inhaltsverzeichnis Vorwort XA-Protokoll So implem...

Analyse des Funktionsprinzips und des Implementierungsprozesses von Docker Hub

Ähnlich wie der von GitHub bereitgestellte Code-H...

Jenkins+Gitlab+Nginx Bereitstellung einer Front-End-Anwendung

Inhaltsverzeichnis Zugehörige Abhängigkeitsinstal...

Womit kann ich dich, meinen Tisch, retten (Haiyu-Blog)

Tabellen spielten einst eine sehr wichtige Rolle ...

Verwenden Sie reines CSS, um das A-Tag in HTML ohne JavaScript zu deaktivieren

Tatsächlich ist dieses Problem bereits aufgetreten...

Webdesign-Dimensionen und Regeln für die Werbegestaltung auf Webseiten

1. Unter 800 x 600 gibt es keine horizontale Bild...

Detaillierte Erklärung zur Installation und Verwendung von Vue-Router

Inhaltsverzeichnis Installieren Grundlegende Konf...

Schritte für Vue3 zur Verwendung von Mitt für die Komponentenkommunikation

Inhaltsverzeichnis 1. Installation 2. Ins Projekt...

Docker5 - Vollfunktionaler Hafenlager-Bauprozess

Harbor ist ein Registry-Server auf Unternehmenseb...