js, um den Effekt eines Lichtschalters zu erzielen

js, um den Effekt eines Lichtschalters zu erzielen

In diesem Artikelbeispiel wird der spezifische Code von js zur Erzielung des Lichtschaltereffekts als Referenz angegeben. Der spezifische Inhalt ist wie folgt

Lassen Sie uns anhand einer Studie von js einen kleinen Fall der Simulation eines Lichtschalters durchführen.

Lassen Sie uns zunächst diesen Fall analysieren. Der Ablauf ist wie folgt:

1. Bildeigenschaften abrufen

2. Klickereignis binden

3. Bilder beim Klicken wechseln

1. Schalten Sie das Licht mit einem Knopf ein und aus

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <title>Titel</title>
</Kopf>
<Text>
<img src="imgs/on.gif" alt="" id="img"> <br><!--Bild-->
<input type="button" id="bt1" value="on" onclick="f1()"><!--Button-->
<button id="bt2" onclick="f2()">Schließen</button>
</body>
<Skript>
function f1() {//Öffnen let bt1=document.getElementById("bt1");//Button-ID abrufen
 let img=document.getElementById("img"); //Bild-ID abrufen
 img.src="imgs/on.gif"; //Bild ändern}
function f2() {//Schließen let bt2=document.getElementById("bt2");
 let img = document.getElementById("img");
 img.src="Bilder/aus.gif";
}
</Skript>
</html>

Laufergebnisse:

2. Schalten Sie das Licht ein und aus, indem Sie darauf klicken

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <title>Titel</title>
</Kopf>
<Text>
<img src="imgs/off.gif" alt="" id="img"> <br>
</body>
<Skript>
 let img = document.getElementById("img");
 img.onclick=f;
 lass flag = false;
 Funktion f() {
 wenn (flag==true){
  img.src="imgs/off.gif"
  Flagge=falsch;
 }anders {
  img.src="imgs/auf.gif"
  Flagge=wahr;
 }
 }
</Skript>
</html>

Vereinfachte Version (unter Verwendung des ternären Operators)

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <title>Titel</title>
</Kopf>
<Text>
<img src="imgs/on.gif" Höhe="180" Breite="109" ID="img" onclick="f()">
</body>
<Skript>
 let img = document.getElementById("img");
 sei i=0;
 Funktion f() {
 img.src='imgs/'+(++i%2==0?'aus':'an')+'.gif';
 }
</Skript>
</html>

Ergebnisse der Operation

Schalten Sie das Licht ein und aus, indem Sie auf

Material der Glühbirne:

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:
  • JavaScript-Implementierung eines kleinen Lichtschalters, Beispiel
  • Lichtschalter mit js steuern

<<:  MySQL 5.7.12 Installations- und Konfigurations-Tutorial unter Mac OS 10.11

>>:  So verwenden Sie jconsole zum Überwachen von Remote-Tomcat-Diensten

Artikel empfehlen

Docker implementiert MariaDB-Unterbibliotheken und -Untertabellen sowie Lese-/Schreibtrennungsfunktionen

Inhaltsverzeichnis 1. Einleitung 2. Umweltvorbere...

JavaScript-Ereigniserfassungs-Blubbern und Erfassungsdetails

Inhaltsverzeichnis 1. Ereignisablauf 1. Konzept 2...

Windows DNS-Server weist Sicherheitslücke auf „Wurm-Niveau“ auf, existiert seit 17 Jahren

Einführung in die Sicherheitslücke Die SigRed-Sic...

Implementieren der Prioritätswarteschlange in JavaScript

Inhaltsverzeichnis 1. Einführung in die Priorität...

So beheben Sie das Problem mit der Fußzeile unten auf der Seite (mehrere Methoden)

Als Front-End-Webentwickler sind Sie beim Erstell...

Einstellungen für den Ubuntu-Boot-Autostart-Dienst

So erstellen Sie einen Dienst und starten ihn aut...

Führen Sie die Schritte zum Zurücksetzen des Root-Benutzerkennworts in MySQL8 aus

Vorwort In letzter Zeit haben viele neue Kollegen...

So verwenden Sie Übersetzung und Übergang in CSS3

Ich habe immer das Gefühl, dass Übersetzen und Üb...

Verwenden der Docker Enterprise Edition zum Erstellen Ihres eigenen privaten Registrierungsservers

Docker ist wirklich cool, vor allem, weil es im V...

JavaScript, um einen einheitlichen Animationseffekt zu erzielen

In diesem Artikelbeispiel wird der spezifische Co...

HTML-Tutorial, leicht zu erlernende HTML-Sprache

1. <body background=Bilddateiname bgcolor=Farb...

So implementieren Sie die autorisierte WeChat-Anmeldung elegant in einem Vue3-Projekt

Inhaltsverzeichnis Vorwort Vorbereiten Umsetzungs...

Detaillierte Erklärung der Befehle zum Anzeigen von Linux-Dateien

So zeigen Sie Linux-Dateien an Befehl zum Anzeige...

Detaillierte Erläuterung der KVM-Bereitstellung von drei virtuellen Maschinen zur Implementierung des WordPress-Experiments

1. Einführung in KVM Die Abkürzung für Kernel-bas...

Lernen Sie die asynchrone Programmierung in Node.js in einem Artikel

Inhaltsverzeichnis Einführung Synchron Asynchron ...