Lichtschalter mit js steuern

Verwenden Sie js, um den Lichtschalter zu Ihrer Referenz zu steuern. Der spezifische Inhalt ist wie folgt

Thema:

Steuern Sie den Lichtschalter über js

analysieren:

Holen Sie sich das Glühbirnenelement, binden Sie ein Klickereignis daran und schalten Sie die Glühbirne per Mausklick ein und aus

Implementierungsmethode:

Methode 1:

Holen Sie sich das Bildelement und steuern Sie den Lichtschalter, indem Sie das Klickereignis an die Schaltfläche binden

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Lichtschaltergehäuse</title>
</Kopf>
<Text>
    <img src="./img/关.gif" alt="">
    <button id="open">Licht anmachen</button>
    <button id="close">Licht ausschalten</button>
</body>
<Skript>
    var öffnen = document.getElementById("öffnen");
    var schließen = document.getElementById("schließen");
    var img = document.getElementsByTagName("img")[0];
    öffnen.onclick=function(){
        img.src="./img/png.gif"
    }
    schließen.onclick=function(){
        img.src="./img/gif"
    }
</Skript>
</html>

Zusammenfassung: Diese Methode ist relativ einfach und nicht fehleranfällig. Durch das Binden der Schaltfläche können Sie direkt das entsprechende Lichtschalterbild erhalten.

Laufergebnisse:

Verwandte Methoden:

document.getElementById(): Ruft das entsprechende Element nach ID-Name ab.
document.getElementsByTagName (): Ruft das entsprechende Element anhand des Elementnamens ab. Das erhaltene Objekt ist ein arrayähnliches Objekt.
onclick: Klickereignis, ausgelöst durch Mausklick

Methode 2:

Holen Sie sich das Bildelement und binden Sie das Switch-Ereignis direkt an das Bild

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Lichtschaltergehäuse</title>
</Kopf>
<Text>
    <img src="./img/关.gif" alt="">
</body>
<Skript>
    var img = document.getElementsByTagName("img")[0];
    var flag = falsch;
    img.onclick=Funktion(){
        wenn(Flagge){
            img.src="./img/gif";
            Flagge=falsch;
        }anders{
            img.src="./img/image.gif";
            Flagge=wahr;
        }
    }
</Skript>
</html>

Hinweis: Diese Methode erfordert ein Flag, um den Anfangszustand des Lichts zu bestimmen. Wenn Sie ein Klickereignis direkt an das Bild binden, beachten Sie, dass der Anfangswert des Flags „false“ ist.

Laufergebnis: Beim Klicken auf die Glühbirne wechselt das Licht zwischen hell und dunkel.

Verwandte Bilder:

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:

js, um den Effekt eines Lichtschalters zu erzielen
JavaScript-Implementierung eines kleinen Lichtschalters, Beispiel

<<: Lösung zum Vergessen des Passworts bei der Installation von MySQL unter Linux/Mac

>>: Grafisches Tutorial zur Installation und Konfiguration von VMware Tools für Ubuntu 16.04 64-Bit

So testen Sie die Netzwerkgeschwindigkeit mit JavaScript

Lichtschalter mit js steuern

Thema:

analysieren:

Implementierungsmethode:

So testen Sie die Netzwerkgeschwindigkeit mit JavaScript

Vue.js verwaltet die Kapselung von Hintergrundtabellenkomponenten

Tutorial zur HTML-Tabellenauszeichnung (37): Hintergrundbild-Attribut BACKGROUND

Detaillierte Erläuterung der Nginx-Frontend-Verteilungsmethode basierend auf $remote_addr

Zusammenfassung der Vue Watch-Überwachungsmethoden

React implementiert den Beispielcode der Radiokomponente

Detaillierte Erklärung des Befehlsmodus in der Javascript-Praxis

Detaillierte Erläuterung der Verwendung der Cloud-native-Technologie Kubernetes Scheduling Unit Pod

Detaillierte Erläuterung der MySQL Master-Slave-Replikationspraxis - Replikation basierend auf Protokollpunkten

Möglicherweise benötigen Sie einen digitalen Großbild-Scrolling-Effekt wie diesen

Artikel empfehlen

4 flexible SCSS-Kompilierungsausgabestile

JS implementiert die Append-Funktion von jQuery

Detaillierte Erläuterung der Schritte zur Konfiguration des Centos7-Bridge-Netzwerks unter VMware

Vue-Implementierungsbeispiel mit Google Recaptcha-Verifizierung

Tutorial zur Samba-Konfiguration für die Dateifreigabe im Linux-System

SQL verwendet die Funktion ROW_NUMBER() OVER, um eine Sequenznummer zu generieren

Beispielcode zur Implementierung der Menüberechtigungssteuerung in Vue

Detaillierte Ansicht versteckter Spalten in MySQL

Eine einfache und eingehende Studie zu Async und Await in JavaScript

So lassen sich Python-Skripte direkt unter Ubuntu ausführen

Hallo – Erfahrungsaustausch zum Entwurf von Dialogfeldern

So konfigurieren Sie die Basic Auth-Anmeldeauthentifizierung in Nginx

Zusammenfassung der Unterschiede zwischen Get- und Post-Anfragen in Vue

Perfekte Lösung für asynchrone Timeout-Vorgänge im JavaScript-Frontend

So löschen Sie Junk-Dateien elegant in Linux