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
Warum kann mein Tomcat nicht starten?
Inhaltsverzeichnis Phänomen: Portnutzung: Rechtsc...
CSS3 realisiert die Mask Barrage-Funktion
Kürzlich habe ich auf der B-Station einen Sperrfe...
Ein kurzer Vortrag über Rx-responsive Programmierung
Inhaltsverzeichnis 1. Beobachtbar 2. Funktionen h...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17 unter Windows 10
In diesem Artikel erkläre ich ausführlich, wie ma...
js, um Sternblitzeffekte zu erzielen
In diesem Artikelbeispiel wird der spezifische Co...
Bei der SQL-Optimierung treten häufig Fehler auf, weil Sie die Verwendung von MySQL nicht verstehen.
Inhaltsverzeichnis 1. Vorbereitung 2. Einführung ...
Optimierung der Leistung von Paging-Abfragen für MySQL mit mehreren zehn Millionen Daten
Wenn die Datenmenge in MySQL groß ist, wird die S...
So verwenden Sie JS zum Implementieren des Wasserfalllayouts von Webseiten
Inhaltsverzeichnis Vorwort: Was ist ein Wasserfal...
Native js realisiert das Ziehen und Ablegen des Neun-Quadrat-Rasters
Verwenden Sie natives JS, um ein neuneckiges Rast...
Tutorial zur Verwendung von Profilen in MySQL
Was ist ein Profil? Wir können es verwenden, wenn...
Begrenzung der Anzahl kurzfristiger Zugriffe auf eine bestimmte IP basierend auf Nginx
Die Festlegung einer Begrenzung der Anzahl von Be...
Lösung für das Textüberlaufproblem auf CSS-Flex-Basis
Die unbedeutende flex-basis hat bei der kleinen F...
Natives JS zur Implementierung der E-Mail-Eingabeaufforderung im Anmeldefeld
Dieser Artikel beschreibt eine native JS-Implemen...
Zusammenfassung der Anwendung von Übergangskomponenten in Vue-Projekten
Transtion in Vue ist eine Kapselungskomponente f...
Einführung in die Verwendung des Daten-URI-Schemas zum Einbetten von Bildern in Webseiten
Das Daten-URI-Schema ermöglicht es uns, Daten mith...