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:
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:
|
<<: 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
Artikel empfehlen
Detaillierte Erläuterung der Verwendung und Vorsichtsmaßnahmen von Crontab unter Linux
Crontab ist ein Befehl zum Einrichten einer perio...
Lösung zum Vergessen des Root-Passworts von MySQL5.7 unter Windows 8.1
【Hintergrund】 Mir ist beim Lernen kürzlich etwas ...
Probleme bei der Verwendung der Rich-Text-Bearbeitung mit Wangeditor in Vue
wangEditor ist ein webbasierter Rich-Text-Editor,...
MySQL Binlog-Datenwiederherstellung: Detaillierte Erklärung zum versehentlichen Löschen einer Datenbank
Wiederherstellung der MySQL Bin-Protokolldaten: v...
Vue Front-End HbuliderEslint Echtzeitüberprüfung Automatische Reparatureinstellungen
Inhaltsverzeichnis Installation des ESLint-Plugin...
Die perfekte Lösung zum Hervorheben von Schlüsselwörtern in HTML
Bei der Arbeit an einem Projekt bin ich kürzlich ...
Kann Asynchronität in JavaScript „Await“ speichern?
Ich wusste vorher, dass man await verwenden muss,...
So verwenden Sie den JS-Code-Compiler Monaco
Vorwort Meine Anforderungen sind Syntaxhervorhebu...
Docker konfiguriert den Speicherort lokaler Images und Container
Verwenden Sie den Befehl „Find“, um Dateien zu fi...
Detaillierte Erklärung des Unterschieds zwischen Tags und Elementen in HTML
Ich glaube, dass es vielen Freunden, die sich mit ...
Die Rolle und Öffnung des MySQL-Protokolls für langsame Abfragen
Vorwort Das MySQL Slow Query Log ist ein Protokol...
Webdesign-Tutorial (8): Webseitenhierarchie und Raumgestaltung
<br />Vorheriger Artikel: Webdesign-Tutorial...
Detaillierte Erläuterung der Implementierung mehrerer dreispaltiger adaptiver CSS-Layouts
Vorwort Um dem herkömmlichen WEB-Layout zu folgen...
Detaillierte Analyse der MySQL-Abfrageabfangung
Inhaltsverzeichnis 1. Abfrageoptimierung 1. MySQL...
Suchmaschinenfreie Sammlung von Website-Einträgen
1: Anmeldeeingang der Baidu-Website Website: http:...