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

Vollbild-Drag-Upload-Komponente basierend auf Vue3

In diesem Artikel wird hauptsächlich die Vollbild...

Der Implementierungsprozess der ECharts Multi-Chart-Verknüpfungsfunktion

Wenn viele Daten angezeigt werden müssen, ist die...

Dieser Artikel zeigt Ihnen, wie Sie mit CSS-Kombinationsselektoren spielen

CSS-Kombinationsselektoren umfassen verschiedene ...

So konfigurieren Sie Anti-Hotlinking für den Nginx-Websitedienst (empfohlen)

1. Prinzip des Hotlinking 1.1 Vorbereitung der We...

Erstellen Sie eine Bildschirmaufzeichnungsfunktion mit JS

OBS studio ist cool, aber JavaScript ist cooler. ...

JavaScript zum Erreichen aller oder umgekehrter Auswahlfunktionen

In diesem Artikel wird der spezifische JavaScript...

Beispiel für die Konfiguration von Nginx im CentOS-Server

Laden Sie das sichere Terminal MobaXterm_Personal...

Einführung in das Fokuselement document.activeELEment in JavaScript

Inhaltsverzeichnis 1. Der Fokus liegt standardmäß...

So erstellen Sie LVM für das XFS-Dateisystem in Ubuntu

Vorwort Die logische Datenträgerverwaltung von lv...

Entdecken Sie, wie Ihnen eine LED den Einstieg in den Linux-Kernel erleichtert

Inhaltsverzeichnis Vorwort LED-Trigger Entdecken ...

Die Iframe-Aktualisierungsmethode ist bequemer

So aktualisieren Sie Iframe 1. Zum Aktualisieren k...

HTML+CSS zum Erreichen eines reaktionsfähigen Karten-Hover-Effekts

Inhaltsverzeichnis erreichen: Zusammenfassen: Daz...

Analyse von MySQL-Latenzproblemen und Datenlöschungsstrategieprozess

Inhaltsverzeichnis 1. MySQL-Replikationsprozess 2...