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
Vue + Express + Socket realisiert Chat-Funktion
In diesem Artikel wird der spezifische Code von V...
Vue3 manuelle Kapselung Popup-Box-Komponente Nachrichtenmethode
In diesem Artikel wird der spezifische Code der m...
Implementierung der Multi-Environment-Konfiguration (.env) des Vue-Projekts
Inhaltsverzeichnis Was ist eine Multiumgebungskon...
SQL-Implementierung von LeetCode (197. Steigende Temperatur)
[LeetCode] 197.Steigende Temperatur Schreiben Sie...
Zusammenfassung der Vue-Datenreaktionsfähigkeit
Bevor wir über die Datenreaktivität sprechen, müs...
Designreferenz Schönes und originelles Blog-Design
Alle unten aufgeführten Blogs sind originell und ...
5 Punkte, auf die Sie beim Erstellen einer Webseite achten sollten
1. Farbabstimmungsproblem <br />Eine Webseit...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17 winx64
Windows-Installation mysql-5.7.17-winx64.zip Meth...
Schritte zur Implementierung der Autorisierungsanmeldung für das WeChat-Applet von Uni-App
Inhaltsverzeichnis 1. Anwendung und Konfiguration...
CSS 3.0 Text Hover Jump Spezialeffekte-Code
Hier ist ein mit CSS 3.0 implementierter Textschw...
Zusammenfassung des Wissens zu CSS-Injection
Moderne Browser erlauben nicht mehr, JavaScript i...
Prozessanalyse von reservierten Wortanweisungen in Dockerfile
Inhaltsverzeichnis 1. Was ist Dockerfile? 2. Anal...
Details zum MySQL-Index-Pushdown
Inhaltsverzeichnis 1. Prinzip des ganz linken Prä...
Übersicht über die Definition der HTC-Komponenten nach IE5.0
Vor der Veröffentlichung von Microsoft IE 5.0 best...
Detaillierte Erläuterung der Vuex-Persistenz in der praktischen Anwendung von Vue
Inhaltsverzeichnis Vuex-Persistenz Zusammenfassen...