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

Detaillierte Erklärung zu MySQL und Springs Autocommit

1 MySQL Autocommit-Einstellungen MySQL führt stan...

Implementierung eines Element-Eingabefelds, das automatisch den Fokus erhält

Beim Erstellen eines Formulars in einem aktuellen...

JS Cross-Domain-XML – mit AS URLLoader

Kürzlich erhielt ich eine Anforderung für eine Fun...

Lösung für die horizontale Bildlaufleiste im Iframe unter IE6

Die Situation ist wie folgt: (PS: Das rote Kästche...

Detaillierte Erklärung zum Einrichten eines DNS-Servers unter Linux

1. DNS-Server-Konzept Die Kommunikation im Intern...

Eine detaillierte Einführung in die Verwendung von Blockkommentaren in HTML

Allgemeine Kommentare in HTML: <!--XXXXXXXX--&g...

Zusammenfassung einiger kleinerer Probleme mit der MySQL-Autoinkrement-ID

Die folgenden Fragen basieren alle auf der InnoDB...

So verwenden Sie SVG-Symbole in WeChat-Applets

SVG wurde in den letzten Jahren aufgrund seiner v...

Installieren des Ping-Tools in einem von Docker erstellten Container

Denn die von Docker abgerufenen Basisimages wie C...

Einführung in HTML DOM_PowerNode Java Academy

Was ist DOM? Mit JavaScript können Sie das gesamt...