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

So implementieren Sie den Vue-Timer

In diesem Artikelbeispiel wird der spezifische Co...

In einem Artikel erfahren Sie, wie Sie Vue-Frontend-Paging und Backend-Paging implementieren.

Inhaltsverzeichnis 1: Handschriftliche Seitennumm...

Detaillierte Erläuterung der Implementierungsmethode für Linux inotify-Echtzeitsicherungen

Die Echtzeitreplikation ist die wichtigste Method...

Zusammenfassung gängiger Docker-Befehle (empfohlen)

1. Zusammenfassung: Im Allgemeinen können sie in ...

js verwendet Cookies, um die Seitenvorgänge des Benutzers zu speichern

Vorwort Während des Entwicklungsprozesses stoßen ...

Docker nginx implementiert einen Host zum Bereitstellen mehrerer Sites

Die virtuelle Maschine, die ich von einer bestimm...

So verwenden Sie das Flex-Layout, um ein Scrollen des festen Inhaltsbereichs im Kopf zu erreichen

Das feste Layout des Seitenkopfes wurde zuvor mit...

Weitergabe von Techniken für Farbkontrast und -harmonie im Web

Farbkontrast und Harmonie Unter kontrastierenden ...

Webdesign-Kenntnisse: Hohe Rankingprobleme bei gemischten chinesischen und englischen Webseiten

<br />Ich werde mit diesem Problem im Grunde...

Lösung zum automatischen Absenden des Formulars und Springen zu anderen Seiten nach Drücken der Eingabetaste auf der Webseite

Nach dem Drücken der Eingabetaste auf der Webseite...

Linux führt jeden Tag eine automatische und geplante Sicherung der MySQL-Datenbank durch

Überblick Backup ist die Grundlage der Notfallwie...

Zusammenfassung aller HTML-Interviewfragen

1. Die Rolle des Doctypes, der Unterschied zwisch...

Grundlegende Kenntnisse zur Verwendung von Miniprogrammen (sehr umfangreich, empfehlenswert!)

Inhaltsverzeichnis Was ist bei der Registrierung ...

Gängige Methoden und Probleme der Docker-Bereinigung

Wenn Sie Docker für die Entwicklung im großen Maß...

Wann ist die Verwendung von dl, dt und dd sinnvoll?

dl: Definitionsliste Definitionsliste dt: Definiti...