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
Installationshandbuch für die MySQL 5.7.18-Version (einschließlich Binärdateiversion)
Der Installationsvorgang ist im Grunde derselbe w...
Grundlegender JSON-Betriebsleitfaden in MySQL 5.7
Vorwort Aufgrund der Projektanforderungen werden ...
Fortgeschrittene JavaScript-Programmierung: Variablen und Umfang
Inhaltsverzeichnis 1. Ursprungswert und Bezugswer...
10 schlechte Angewohnheiten, die Sie bei Docker-Containeranwendungen vermeiden sollten
Es besteht kein Zweifel, dass Container zu einem ...
Ubuntu installiert scrcpy, um die Bildschirmprojektion und -steuerung des Mobiltelefons abzuschließen (eine weitere Möglichkeit, QQ WeChat in Ubuntu zu verwenden).
Scrcpy-Installation snap install scrcpy Installat...
Idee zur Implementierung eines Popup-Maskeneffekts für Kommentarantworten, kompatibel mit IE 8/Chrome/Firefox
Ich verfolge wochentags gerne die Nachrichten und ...
MySQL-Primärschlüssel-Benennungsstrategie im Zusammenhang
Als ich kürzlich die Details der Datenlebenszyklu...
js, um ein Wasserfall-Flusslayout zu erreichen (unendliches Laden)
In diesem Artikelbeispiel wird der spezifische Co...
Vollständige Analyse des MySQL INT-Typs
Vorwort: Integer ist einer der am häufigsten verw...
Native JS-Kapselung, nahtlose Karussellfunktion
Natives js-gekapseltes nahtloses Karussell-Plug-I...
Gängige Methoden zur Optimierung der Docker-Imagegröße
Die Docker-Images, die wir normalerweise erstelle...
So installieren und konfigurieren Sie MySQL und ändern das Root-Passwort
1. Installation apt-get install mysql-server erfo...
CSS3 realisiert eine springende Ballanimation
Normalerweise besuche ich gerne die Sonderseiten ...
So konfigurieren Sie Tomcat und führen Ihr erstes Java-Webprojekt auf IntelliJ IDEA 2018 aus
1 Tomcat herunterladen und starten Gehen Sie auf ...
Offlineinstallation von Centos7.2 mysql5.7.18.tar.gz
Aufgrund der Netzwerkisolation kann MySQL nicht m...