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)

Detaillierte Erklärung, wo das von Docker abgerufene Image gespeichert ist

js realisiert Warenkorb-Add- und Subtraktions- sowie Preisberechnungsfunktionen

Anforderungen:

Effektbild:

Code:

Detaillierte Erklärung, wo das von Docker abgerufene Image gespeichert ist

Tipps zum Mischen von OR und AND in SQL-Anweisungen

Verwenden von jQuery zum Implementieren des Karusselleffekts

So begrenzen Sie die Anzahl gleichzeitiger Verbindungsanforderungen in Nginx

MySQL-Gruppierungsabfragen und Aggregatfunktionen

Docker installiert MySQL und löst das chinesische verstümmelte Problem

Probleme und Lösungen beim Verbinden des Knotens mit der MySQL-Datenbank

MySQL-Variablendeklaration und Analyse gespeicherter Prozeduren

Lösen Sie das Problem des Startfehlers von PHPStudy MySQL unter Windows

MySQL und MySQL Workbench Installations-Tutorial unter Ubuntu

Artikel empfehlen

Zusammenfassung der Unterschiede und Verwendung von Plugins und Komponenten in Vue

MySQL-Sortierprinzipien und Fallanalyse

CSS implementiert verschiedene Ladeeffekte mit Parsing-Prozess

So schreiben Sie ein MySQL-Sicherungsskript

Fallstudie zu JavaScript-Ereignisschleifen

So verwenden Sie das Marquee-Tag im XHTML-Code

Eine Aufzeichnung der Fallstricke des Lebenszyklus von WeChat-Applet-Komponenten

Implementierung der Nginx-Domänennamenweiterleitung für den HTTPS-Zugriff

Typische Fälle von MySQL-Indexfehlern

Docker-Installationsschritte für Redmine

Detaillierte Erklärung der Vue-Anmeldung und -Abmeldung

Tutorial zu HTML-Tabellen-Tags (31): Breiten- und Höhenattribute für Zellen WIDTH, HEIGHT

Lösung für MySQL-Fehler beim Ändern des SQL-Modus

Implementierung der Einbindung eines freigegebenen NFS-Verzeichnisses in einen Docker-Container

HTML-Codebeispiel: Detaillierte Erklärung von Hyperlinks