JS implementiert einfache Addition und Subtraktion von Warenkorbeffekten
|
In diesem Artikelbeispiel wird der spezifische JS-Code zur einfachen Addition und Subtraktion von Einkaufswagen als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt 1. Schreiben Sie das Eingabefeld als Ergebnis einer Addition oder Subtraktion. 2. Die Plus- und Minus-Tasten werden mit Button-Buttons umgesetzt 3. Verwenden Sie js, um den Wert von i als Wert im Eingabefeld zu steuern. Der erzielte Effekt:
Der vollständige Code lautet wie folgt:
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8" />
<Titel></Titel>
<Stil>
Körper{
Rand: 0;
Polsterung: 0;
}
.Kasten{
Rand: rot, durchgezogen 1px;
Höhe: 40px;
Breite: 200px;
Rand: 200px automatisch;
Textausrichtung: zentriert;
Polsterung oben: 20px;
}
.box Eingabe{
Breite: 40px;
Textausrichtung: zentriert;
}
#Geld{
Rand: keiner;
Textausrichtung: links;
Rand links: 2px;
}
ul{
Listenstil: keiner;
}
ul li{
Anzeige: Block;
schweben: links;
vertikale Ausrichtung: Mitte;
}
</Stil>
<Skript>
fenster.onload = funktion(){
var plus = document.getElementById("plus");
var i = document.getElementById("text").Wert;
var subtrahieren = document.getElementById("subtrahieren");
var Geld = document.getElementById("Geld").Wert;
plus.onclick = Funktion(){
ich++;
document.getElementById("text").Wert = i;
document.getElementById("Geld").value = i*Geld;
}
subtrahieren.beiKlick = Funktion(){
wenn (i>0) {
ich--;
document.getElementById("text").Wert = i;
document.getElementById("Geld").value = i*Geld;
} anders{
ich = 0;
document.getElementById("text").Wert = i;
document.getElementById("Geld").value = i*Geld;
}
}
}
</Skript>
</Kopf>
<Text>
<ul Klasse="Box">
<li><button id="plus">+</button></li>
<li><Eingabetyp="Text" ID="Text" Wert="1"/></li>
<li><button id="subtrahieren">-</button></li>
<li> ¥<input type="text" id="money" value="88"/></li>
</ul>
</body>
</html>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 Installer 8.0.18 Visuelles Installationstutorial mit Bildern und Text
Artikel empfehlen
Häufig gestellte Fragen zum Webinterview: Prinzipien und Unterschiede zwischen Reflow und Repaint
Inhaltsverzeichnis Der Rendering-Mechanismus des ...
Einfache Implementierungsmethode zur Linux-Prozessüberwachung und zum automatischen Neustart
Zweck: Unter Linux kann das Serverprogramm aus ve...
Detaillierte grafische Erklärung zum Löschen des Keep-Alive-Cache
Inhaltsverzeichnis Eröffnungsszene Direktes Rende...
Mehr als 300 Zeilen CSS-Code, um die explosiven Spezialeffekte von WeChat 8.0 zu erzielen
Ein Hauptmerkmal des WeChat 8.0-Updates ist die U...
Detaillierte Erläuterung der Idee der xshell-Remote-Anmeldung bei CentOS7 ohne Kennwortanmeldung
Lassen Sie mich zunächst über die allgemeine Idee...
Lösung zum Hinzufügen einer iptables-Firewall-Richtlinie zum MySQL-Dienst
Wenn Ihre MySQL-Datenbank auf einem CentOS7-Syste...
Realisieren Sie einen super coolen Wasserlichteffekt auf Leinwandbasis
In diesem Artikelbeispiel erfahren Sie den spezif...
Detaillierte Erläuterung des React setState-Datenaktualisierungsmechanismus
Inhaltsverzeichnis Warum setState verwenden? Verw...
Wartungsmethode für den Innodb-Systemtabellenbereich
Umweltbeschreibung: Es gibt eine laufende MySQL-U...
So verwenden Sie das Modul-FS-Dateisystem in Nodejs
Inhaltsverzeichnis Überblick Dateideskriptoren Sy...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7
In diesem Tutorial erfahren Sie alles über die In...
Lösung für das Timeout-Problem der SNMP4J-Serververbindung
Als Verwaltungszentrale und Server dient dabei un...
jQuery implementiert die Formularvalidierung
Verwenden Sie jQuery, um die Formularvalidierung ...
Dinge, die Sie nicht über die CSS-Pseudoelemente ::before und ::after wissen
CSS hat zwei Pseudoklassen, die nicht häufig verw...
Analyse eines MySQL-Deadlock-Szenariobeispiels
Vorwort Kürzlich stieß ich auf ein Deadlock-Probl...