js realisiert Warenkorb-Add- und Subtraktions- sowie Preisberechnungsfunktionen

js realisiert Warenkorb-Add- und Subtraktions- sowie Preisberechnungsfunktionen

In diesem Artikel wird der spezifische Code von js zur Realisierung der Warenkorb-Addierung und -Subtraktion sowie der Preisberechnung zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Anforderungen:

1. Wenn Sie auf die Schaltfläche "Halb schließen" klicken, schließen Sie die aktuelle Warenkorbseite
2. Klicken Sie auf „Zu Favoriten verschieben“, um die Sammlungsaufforderung anzuzeigen
3. Klicken Sie auf „Löschen“, um eine Eingabeaufforderung zur Bestätigung des Löschvorgangs anzuzeigen
4. Klicken Sie auf die Schaltfläche „Abrechnung“. Das Fenster mit der Abrechnungsinformationsseite wird angezeigt.
5. Produktsummen automatisch berechnen
6. Klicken Sie auf die Schaltfläche „Löschen“, greifen Sie mit parentNode auf den übergeordneten Knoten des aktuellen Knotens zu und löschen Sie das aktuelle Produkt mit removeChild().

Effektbild:

Code:

<!DOCTYPE html>
<html>
<head lang="de">
    <meta charset="UTF-8">
    <title>Dangdang-Einkaufswagenseite verbessern</title>
    <style type="text/css">
     Körper, ul, li, div, p, h1, h2, ol {Rand: 0; Polsterung: 0;}
ul,li,ol{Listenstil: keine;}
.content{width: 810px; margin: 0 auto; font-family: "Microsoft YaHei";}
.logo{margin: 10px 0;}
.logo span{
    Anzeige: Inline-Block;
    schweben: rechts;
    Breite: 60px;
    Höhe: 30px;
    Zeilenhöhe: 30px;
    Schriftgröße: 14px;
    Hintergrund: #ff0000;
    Farbe: #ffffff;
    Textausrichtung: zentriert;
    Rahmenradius: 10px;
    Rand oben: 5px;
    Rand rechts: 10px;
    Cursor: Zeiger;
    Schriftstärke: fett;
}
.cartList{
    /*Hintergrund: url("../image/02.jpg") keine Wiederholung;*/
    /*Höhe: 414px;*/
    Überlauf: versteckt;
}
.cartList ul{
    Anzeige: Flex;
    Inhalt ausrichten: Abstand dazwischen;
    /*float: rechts;*/
    /*Breite: 450px;*/
}
.cartList ul:n-ter-Typ(1){
    Anzeige: Flex;
    Rand oben: 125px;
}
.cartList ul:nth-of-type(2){
    Rand: 20px 0;
}
.cartList ul li{
    Schriftfamilie: „Microsoft YaHei“;
    Schriftgröße: 12px;
    Farbe: #666666;
    Textausrichtung: zentriert;
    Zeilenhöhe: 25px;
    /*Float: links;*/
}
.cartList ul li input[name="Preis"]{
    Rand: keiner;
    Hintergrund: transparent;
    Breite: 45px;
    Textausrichtung: zentriert;
}
.cartList ul li Eingabe[name="Betrag"]{
    Breite: 45px;
    Textausrichtung: zentriert;
    Rand: 1px durchgezogen #999999;
    Rand links: keiner;
    Rand rechts: keiner;
    Höhe: 21px;
}
.cartList ul li input[name="minus"],.cartList ul li input[name="plus"]{
    Höhe: 25px;
    Rand: 1px #999999 durchgezogen;
    Breite: 25px;
    Textausrichtung: zentriert;
}
.cartList ul li:nth-of-type(1){width: 130px;}
.cartList ul li:nth-of-type(2){width: 100px;}
.cartList ul li:nth-of-type(3){width: 130px;}
.cartList ul li p{cursor: pointer;}
.cartList ol{
    schweben: rechts;
    klar: beides;
    Rand oben: 40px;
}
.cartList ol li{
    schweben: links;
}
.cartList ol li:nth-of-type(1){
    Farbe: #ff0000;
    Breite: 80px;
    Höhe: 35px;
    Zeilenhöhe: 35px;
    Textausrichtung: zentriert;
}
.cartList ol li span{display: inline-block;
    schweben: rechts;
    Breite: 80px;
    Höhe: 35px;
    Zeilenhöhe: 35px;
    Schriftgröße: 14px;
    Schriftfamilie: „Microsoft YaHei“;
    Hintergrund: #ff0000;
    Farbe: #ffffff;
    Textausrichtung: zentriert;
    /*Rand oben: 5px;*/
    /*Rand rechts: 15px;*/
    Cursor: Zeiger;
    Schriftstärke: fett;}
 
    </Stil>
</Kopf>
 
<!--onload, berechne die ursprüngliche Menge beim Laden-->
<body onload="gesamt()">
 
<div Klasse="Inhalt">
    <div Klasse="Logo">
        <span onclick="javascript:if (confirm('Möchten Sie wirklich schließen?'))window.close()">Schließen</span>
    </div>
    <div Klasse="Warenkorbliste">
        <ul>
            <li>Produktinformationen</li>
            <li>Produktbilder</li>
            <li>Stückpreis (Yuan)</li>
            <li>Menge</li>
            <li>Betrag (Yuan)</li>
            <li>Betrieb</li>
        </ul>
        <ul style="Anzeige: Flex; Inhalt ausrichten: Abstand zwischen; Elemente ausrichten: Mitte" id="Erste">
            <li>Gewöhnliche Welt</li>
            <li><img src="./img/1.png" alt="" width="50" height="50"></li>
            <li>¥<Eingabetyp="Text" Name="Preis" Wert="21,90"></li>
            <li><input type="button" name="minus" value="-" onclick="minus(0)"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="plus(0)" ></li>
            <li id="price0">21,90 ¥</li>
            <li><p onclick="save()">Zu Favoriten hinzufügen</p><p onclick="delete1()">Löschen</p></li>
        </ul>
        <ul style="Anzeige: Flex; Inhalt ausrichten: Abstand zwischen; Elemente ausrichten: Mitte; Rand: 20px 0;">
            <li>《Insektenleben》</li>
            <li><img src="./img/2.png" alt="" width="50" height="50"></li>
            <li>¥<Eingabetyp="Text" Name="Preis" Wert="24,00"></li>
            <li><input type="button" name="minus" value="-" onclick="minus(1)"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="plus(1)"></li>
            <li id="price1">24,00 ¥</li>
            <li><p onclick="save()">Zu Favoriten hinzufügen</p><p onclick="delete1()">Löschen</p></li>
        </ul>
        <ol>
            <li id="Gesamtpreis">&nbsp;</li>
            <li><span>Siedlung</span></li>
        </ol>
    </div>
</div>
</body>
</html>
 
<Skript>
    //Subtraktionsfunktion minus(index) {
        //Den aktuellen Betrag abrufen var amount=document.getElementsByName("amount");
 
        //Holen Sie sich den Wert des Value-Attributs des ersten Betrags elementvar count=parseInt(amounts[index].value); //Die Zahl plus 1
 
        wenn (Anzahl<=1){
            alert("Kann es nicht weiter reduzieren, es ist fast weg!!");
        } anders {
            //Holen Sie sich den Wert des Value-Attributs des ersten Betrags elementvar count=parseInt(amounts[index].value)-1; //Die Zahl plus 1
 
            //Binden Sie den Zählwert erneut an das Mengentextfeld portions[index].value=count;
            var Preise = document.getElementsByName("Preis");
            var Preis = parseFloat(Preise[Index].Wert);
            //Der Grund für die Multiplikation mit Math.pow(10,2) besteht darin, Verzerrungen zu vermeiden. var totalMoney=((price*Math.pow(10,2))*count)/Math.pow(10,2);
 
            document.getElementById("Preis"+index).innerHTML="¥:"+totalMoney;
        }
 
        gesamt();
 
    }
 
    //Additionsfunktion plus(index) {
 
        //Den aktuellen Betrag abrufen var amount=document.getElementsByName("amount");
 
        //Holen Sie sich den Wert des Value-Attributs des ersten Betrags elementvar count=parseInt(amounts[index].value)+1; //Die Zahl plus 1
 
        //Binden Sie den Zählwert erneut an das Mengentextfeld portions[index].value=count;
 
        //Der Preis des aktuell betriebenen Ports muss ebenfalls neu berechnet werden //Holen Sie sich den Stückpreis des aktuellen Ports var prices=document.getElementsByName("price");
        var Preis = parseFloat(Preise[Index].Wert);
        //Der Grund für die Multiplikation mit Math.pow(10,2) besteht darin, Verzerrungen zu vermeiden. var totalMoney=((price*Math.pow(10,2))*count)/Math.pow(10,2);
 
        //Den aktuellen Preis im Text anzeigen document.getElementById("price"+index).innerHTML="¥："+totalMoney;
 
        gesamt();
    }
 
 
    //Gesamtbetrag berechnenfunction total() {
 
        //Alle Mengen abrufen var counts = document.getElementsByName("amount");
 
        //Alle Stückpreise abrufen var prices=document.getElementsByName("price");
 
        var SummeGeld=0;
 
        für (var i=0;i<Anzahl.Länge;i++){
 
            //Der Grund für die Multiplikation mit Math.pow(10,2) besteht darin, Verzerrungen zu vermeiden. sumMoney+=(parseFloat(prices[i].value)*Math.pow(10,2)*parseInt(counts[i].value)/Math.pow(10,2));
        }
 
        //Den Gesamtbetrag im angegebenen Element anzeigen document.getElementById("totalPrice").innerHTML="¥："+sumMoney;
 
    }
 
 
    //Zu Favoriten hinzufügen Funktion save() {
        if (confirm("Möchten Sie es wirklich speichern?")){
            alert("Erfolgreiche Erfassung!");
        }
 
    }
    //Löschfunktion delete1() {
        if (confirm("Möchten Sie wirklich löschen?")) {
            var del = document.getElementById("erstes");
            del.parentNode.removeChild(del);
            alert("Erfolgreich gelöscht!!");
        }
    }
</Skript>

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 implementiert das Hinzufügen und Entfernen von Warenkörben sowie die Preisberechnung
  • 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

<<:  Tutorial zur Installation von MySQL 8.0.11 unter Linux

>>:  Eine kurze Analyse der SpringBoot-Verpackung und des Hochladens in Docker sowie der Implementierung der Bereitstellung mehrerer Instanzen (IDEA-Version)

Artikel empfehlen

Der Prozess der Verwendung von vxe-table zum Erstellen bearbeitbarer Tabellen in Vue

Im Projekt gibt es eine Tabelle, die online bearb...

Der Unterschied zwischen ID- und Name-Attributen von HTML-Elementen

Heute bin ich etwas verwirrt über <a href="...

Detaillierte Erklärung des Linux-Befehls unzip

Inhaltsverzeichnis 1. Unzip-Befehl 1.1 Syntax 1.2...

So fügen Sie der Seite über Element UI eine Seitennavigationsleiste hinzu

brauchen Fügen Sie eine Paging-Leiste hinzu, die ...

Detaillierte Erklärung zum Erstellen gespeicherter Prozeduren und Funktionen in MySQL

Inhaltsverzeichnis 1. Gespeicherte Prozedur 1.1. ...

Detaillierte Erklärung der beiden Modi des Router-Routings in Vue: Hash und Verlauf

Hash-Modus (Standard) Funktionsprinzip: Überwache...

Detaillierte Erläuterung der Installation des Nginx-Servers und der Lastausgleichskonfiguration auf einem Linux-System

nginx (Engine x) ist ein leistungsstarker HTTP- u...

Docker: Das Ändern des DOCKER_OPTS-Parameters in /etc/default/docker wird nicht wirksam

Standardmäßig wird die Konfiguration /etc/default...

Die Webseite kann nicht geöffnet werden, da dem Div-Element ein schließender Tag fehlt

Zuerst dachte ich, es läge an der Geschwindigkeit ...

So packen Sie das Projekt per Idee in Docker

Viele Freunde wollten schon immer wissen, wie man...

Vant Uploader implementiert die Drag-and-Drop-Funktion zum Hochladen von Bildern (als Cover festlegen)

Das Wirkungsdiagramm sieht wie folgt aus: <!DO...

Wie stellt MySQL eine Verbindung zum entsprechenden Clientprozess her?

Frage Wie können wir bei einer bestimmten MySQL-V...

So vergleichen Sie zwei Datenbanktabellenstrukturen in MySQL

Während des Entwicklungs- und Debugging-Prozesses...

Neue Möglichkeiten zum Spielen mit CSS-Schriftarten: Implementierung farbiger Schriftarten

Was wäre, wenn Ihre Designer die folgende Schrift...

Beispielcode zur Implementierung eines gestapelten Karusselleffekts mit HTML+CSS+JS

Wirkung: Wenn sich die Diashow in eine Richtung b...