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

Änderung des Zeitzonenproblems von MySQL-Containern in Docker

Vorwort Als Ahhang das Springboot-Projekt entwick...

Lösung für das Problem ungenauer JS-Zahlen

Die verständlichste Erklärung des Genauigkeitspro...

Beispiel für das Hinzufügen von Attributen mithilfe von Stilen in HTML

Fügen Sie den erforderlichen Links Inline-Stile hi...

MySQL-Integritätsbeschränkungen – Definition und Beispiel-Tutorial

Inhaltsverzeichnis Integritätsbeschränkungen Defi...

So verwenden Sie ein HTML-Formular mit mehreren Beispielen

Neun einfache Beispiele analysieren die Verwendun...

JavaScript-Canvas zum Erstellen eines Rubbellos-Beispiels

In diesem Artikel wird der spezifische Code von J...

Erfahren Sie, wie nginx hohe Leistung und Skalierbarkeit erreicht.

Die Gesamtarchitektur von NGINX ist durch eine Re...

So aktualisieren Sie die Knotenversion unter CentOs manuell

1. Suchen Sie das entsprechende NodeJS-Paket unte...

Bild-Scrolling-Effekt mit CSS3 erstellt

Ergebnisse erzielenImplementierungscode html <...

Eingebettetes Transplantations-Docker-Fehlerproblem (Zusammenfassung)

Nach einer langen Zeit der Transplantation und In...

Hadoop 2.x vs. 3.x 22-Punkte-Vergleich, Hadoop 3.x Verbesserungen gegenüber 2.x

Fragen-Leitfaden 1. Wie toleriert Hadoop 3.x Fehl...

Zusammenfassung des Speicherorts und Tipps für Docker-Konfigurationscontainer

Tipps zur Verwendung von Docker 1. Bereinigen Sie...

UrlRewriter-Caching-Probleme und eine Reihe damit verbundener Untersuchungen

Beim Entwickeln einer Website-Funktion kann der S...