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:
|
<<: 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
Konfigurationsmethode für das Nginx-Anforderungslimit
Nginx ist ein leistungsstarker, leistungsstarker ...
Probleme und Fallstricke bei der Installation von Mysql5.7.23 in einer Win10-Umgebung
Ich habe viele Tutorials gelesen, aber festgestel...
Die Verwendung und der Unterschied zwischen vue3 watch und watchEffect
1. Hörer ansehen Vorstellung der Uhr importiere {...
So verwenden Sie localStorage in JavaScript
Wenn Sie Entwickler sind und in die Welt von .NET...
JavaScript zur Implementierung eines einziehbaren sekundären Menüs
Der spezifische Code zur Implementierung des einz...
Implementierung eines CSS-Festlayouts auf beiden Seiten und eines adaptiven Layouts in der Mitte
Analysieren Sie vier gängige Methoden und Prinzip...
Detaillierte Erklärung von :key in VUE v-for
Wenn der Schlüssel nicht zum v-for-Tag hinzugefüg...
Detaillierte Erklärung des Unterschieds zwischen Docker-Compose-Ports und Expose
Es gibt zwei Möglichkeiten, Container-Ports in Do...
Lösung für das domänenübergreifende Problem der SpringBoot- und Vue-Interaktion
Inhaltsverzeichnis Same Origin-Richtlinie für Bro...
Zusammenfassung des Speicherorts und Tipps für Docker-Konfigurationscontainer
Tipps zur Verwendung von Docker 1. Bereinigen Sie...
So erhalten Sie die Schnittmenge/Differenz/Vereinigung zweier Mengen in MySQL
Typische MySQL-Szenarien: Schnittmenge und Differ...
Installationsprozess von CentOS8 Linux 8.0.1905 (Abbildung)
Die aktuellste Version von CentOS ist CentOS 8. A...
Interviewfrage: Dreizeiliges und dreispaltiges Layout, Tabellen werden zusammengeführt und verschachtelte Tabellen sind nicht zulässig
Es gibt eine Interviewfrage, die Folgendes erforde...
JavaScript entfernt unnötige Eigenschaften eines Objekts
Inhaltsverzeichnis Beispiel Methode 1: Löschen Me...
Details zur JS-Array-Deduplizierung
Inhaltsverzeichnis 1 Testfälle 2 JS-Array-Dedupli...