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

Beispiel für einen reinen CSS3-Mindmap-Stil

Mindmap Er sieht wahrscheinlich so aus: Die meist...

CentOS 7 SSHD ändern | Root-Login und SSHD-Port-Skriptdefinition verbieten

1. Erstellen Sie einen neuen Benutzer wwweee000 [...

Detaillierte Erklärung der Beziehung zwischen Linux- und GNU-Systemen

Inhaltsverzeichnis Was ist das Linux-System, das ...

MySQL-Lernprogramm Clustered Index

Das Clustering ist eigentlich relativ zur InnoDB-...

Tutorial zur Installation von VMware, Nmap und Burpsuite

Inhaltsverzeichnis VMware BurpSuite 1. Virtuelles...

Grundlegendes Lernprogramm zum Tabellen-Tag in HTML

Zusammensetzung der Tabellenbeschriftung Die Tabe...

Detaillierte Erklärung der Schritte zum Erstellen eines Vue-Projekts mit Vue-cli

Zuerst müssen Sie Vue-cli installieren: npm insta...

CSS3 + Bézierkurve zum Erzielen eines skalierbaren Eingabesuchfeldeffekts

Und hier nun ohne weitere Umschweife die Renderin...

So verwenden Sie die Clipboard-API in JS

Inhaltsverzeichnis 1. Document.execCommand()-Meth...

Vue implementiert die Shake-Funktion (kompatibel mit ios13.3 und höher)

Vor Kurzem habe ich mit shake.js eine ähnliche Fu...