In diesem Artikelbeispiel wird der spezifische JS-Code zur Implementierung von Warenkorb-Addieren, -Subtrahieren und Preisberechnungen zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt Implementierte Hauptfunktionen: Addition und Subtraktion des Einkaufswagens, Berechnung des Preises einzelner Artikel, Berechnung des Gesamtpreises. Die Preise werden auf zwei Dezimalstellen gerundet. <div Klasse="Inhalt"> <div Klasse="Logo"> <img src="images/dd_logo.jpg"><span onclick="guan()">Schließen</span> </div> <div Klasse = "cartList" id = "zong"> <ul> <li >¥ 21,90</li> <li><input type="button" name="minus" value="-" onclick="jian()"><input type="text" name="amount" value="1" id="shang"><input type="button" name="plus" value="+" onclick="jia()"></li> <li>¥<input type="text" name="price" value="21.90" id="yiqian"></li> <li><p onclick="shou()">Zu Favoriten verschieben</p><p onclick="shan()">Löschen</p></li> </ul> <ul> <li >¥ 24,00</li> <li><input type="button" name="minus" value="-" onclick="jian1()"><input type="text" name="amount" value="1" id="shang1"><input type="button" name="plus" value="+" onclick="jia1()"></li> <li>¥<Eingabetyp="Text" Name="Preis" Wert="24,00"id="erqian" ></li> <li><p onclick="shan()">Zu Favoriten verschieben</p><p onclick="shan()">Löschen</p></li> </ul> <ol> <li id="Gesamtpreis" > 0,00</li> <li><span onclick="jie()">Zur Kasse</span></li> </ol> </div> <h3 id="shijian">Jetzt ist:</h3> </div> Das Obige ist die HTML-Seite Das Folgende ist das JS-Skript var Preis = 0,00; var Preis1 = 0,00; var Preis2 = 0,00; Funktion jian() { var i = parseInt(document.getElementById("shang").valueOf().value) - 1; wenn (i <= 0) { ich = 0; } document.getElementById("shang").valueOf().value = i; Preis1 = 21,90 * i; document.getElementById("yiqian").value=suan(Preis1); zong(); } Funktion jia() { var i = parseInt(document.getElementById("shang").valueOf().value) + 1; document.getElementById("shang").valueOf().value = i; Preis1 = 21,90 * i; document.getElementById("yiqian").value=suan(Preis1); zong(); } Funktion jian1() { var i = parseInt(document.getElementById("shang1").valueOf().value) - 1; wenn (i <= 0) { ich = 0; } document.getElementById("shang1").valueOf().value = i; Preis2 = 24,00 * i; document.getElementById("erqian").value=suan(Preis2); zong(); } Funktion jia1() { var i = parseInt(document.getElementById("shang1").valueOf().value) + 1; document.getElementById("shang1").valueOf().value = i; Preis2 = 24,00 * i; document.getElementById("erqian").value=suan(Preis2); zong(); } Funktion suan(Zahl) { Preis = Preis1 + Preis2; wenn (istNaN(Zahl)) { gibt false zurück; } Zahl = Math.round(Zahl * 100) / 100; var s = Zahl.toString(); var rs = s.indexOf("."); wenn (rs < 0) { rs = s.Länge; s += "."; } während (s.Länge <= rs + 2) { s += "0"; } Rückgabe s; } Funktion zong() { Preis = Preis1 + Preis2; wenn (isNaN(Preis)) { gibt false zurück; } Preis = Math.round(Preis * 100) / 100; var s = Preis.toString(); var rs = s.indexOf("."); wenn (rs < 0) { rs = s.Länge; s += "."; } während (s.Länge <= rs + 2) { s += "0"; } document.getElementById("Gesamtpreis").innerHTML=s; } Es wird die grundlegendste Methode verwendet, die für Anfänger leicht zu verstehen ist und insbesondere für diejenigen mit Wissensdefiziten grundsätzlich verständlich ist. 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:
|
>>: Detailliertes Tutorial zum Bereitstellen eines Django-Projekts unter CentOS
In diesem Artikel werden hauptsächlich die folgen...
Inhaltsverzeichnis Props-Vergleich von Klassenkom...
Laden Sie zunächst die grüne kostenlose Installat...
Inhaltsverzeichnis Projektverzeichnis Docker-Date...
Inhaltsverzeichnis Funktionale Komponenten So sch...
Vorwort Node wird als mittlere Schicht im Projekt...
Die Fremdschlüsseleinschränkung von MySQL dient z...
Bibliotheksverwaltung Erstellen einer Bibliothek ...
Wenn wir ein Formular erstellen, legen wir häufig ...
HTML imitiert die Dropdown-Menüfunktion der Baidu...
1. Zielumgebung Windows 7 64-bit 2. Materialien (...
Inhaltsverzeichnis Vorwort Einen Stapel und zwei ...
1. Docker-Startproblem: Problem gelöst: Sie müsse...
Tatsächlich haben wir in letzter Zeit viel über W...
Inhaltsverzeichnis Vorwort Kurzübersicht: JavaScr...