js implementiert das Hinzufügen und Entfernen von Warenkörben sowie die Preisberechnung

js implementiert das Hinzufügen und Entfernen von Warenkörben sowie die Preisberechnung

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:
  • js realisiert Warenkorb-Add- und Subtraktions- sowie Preisberechnungsfunktionen
  • js zum Addieren und Subtrahieren der Anzahl der Artikel im Einkaufswagen
  • So fügen Sie Produktkomponenten zum vue.js-Einkaufswagen hinzu
  • Implementierung des „In den Einkaufswagen“-Effekts auf JavaScript-Basis mit Quellcode-Download
  • JS implementiert einfache Addition und Subtraktion von Warenkorbeffekten

<<:  So erstellen (CREATE PROCEDURE) und rufen (CALL) Sie eine gespeicherte MySQL-Prozedur auf und so erstellen (DECLARE) und weisen (SET) Sie eine Variable zu

>>:  Detailliertes Tutorial zum Bereitstellen eines Django-Projekts unter CentOS

Artikel empfehlen

Ein kurzer Vergleich von Props in React

Inhaltsverzeichnis Props-Vergleich von Klassenkom...

Detaillierte Erklärung inkompatibler Änderungen von Komponenten in vue3

Inhaltsverzeichnis Funktionale Komponenten So sch...

So stellen Sie Node.js mit Docker bereit

Vorwort Node wird als mittlere Schicht im Projekt...

Beispielerklärung von MySQL-Fremdschlüsseleinschränkungen

Die Fremdschlüsseleinschränkung von MySQL dient z...

Zusammenfassung gängiger MySQL-DDL-Operationen

Bibliotheksverwaltung Erstellen einer Bibliothek ...

HTML imitiert die Dropdown-Menüfunktion der Baidu-Enzyklopädienavigation

HTML imitiert die Dropdown-Menüfunktion der Baidu...

Lösen Sie den Konflikt zwischen Docker und VMware

1. Docker-Startproblem: Problem gelöst: Sie müsse...

Einige Tipps zum Website-Design

Tatsächlich haben wir in letzter Zeit viel über W...

Tiefgreifendes Verständnis der JavaScript-Rückruffunktionen

Inhaltsverzeichnis Vorwort Kurzübersicht: JavaScr...