js zur Realisierung einer einfachen Warenkorbfunktion

In diesem Artikelbeispiel wird der spezifische Code von js zur Realisierung der einfachen Warenkorbfunktion zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

1. Gesamtwirkungsdiagramm

(Licht aus)

(Mach das Licht an)

2. HTML-Code

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Warenkorb</title>
    <link type="text/css" rel="stylesheet" href="Einkaufswagen style.css" >
    <script src="Einkaufswagenfunktion.js"></script>
</Kopf>
<body id="körper" >
<button id="kg" onclick="kz()">Licht anmachen</button>
<div id="Nachteile">
    <Tabellen-ID="Tabelle">
        <tr>
            <th>Produktname</th>
            <th>Stückpreis des Produkts</th>
            <th>Produktmenge</th>
            <th>Gesamtpreis</th>
        </tr>
        <tr>
            <td>Xiaomi 11</td>
            <td >5000</td>
            <td>
                <Eingabetyp="Schaltfläche" Wert="-" beim Klicken="Hinzufügen(dieses)">
                <span class="num">5</span>
                <input type="button" value="+" onclick="add2(this)"><!--Finden Sie heraus, wer hierdurch geklickt hat-->
            </td>
            <td class="Geld">25000</td>
        </tr>
        <tr>
            <td>Lenovo Y9000</td>
            <td>10000</td>
            <td>
                <Eingabetyp="Schaltfläche" Wert="-" beim Klicken="Hinzufügen(dieses)">
                <span class="num">1</span>
                <Eingabetyp="Schaltfläche" Wert="+" bei Klick="add2(this)">
            </td>
            <td class="Geld">10000</td>
        </tr>
        <tr>
            <td>Hautpflege für Männer</td>
            <td>200</td>
            <td>
                <Eingabetyp="Schaltfläche" Wert="-" beim Klicken="Hinzufügen(dieses)">
                <span class="num">1</span>
                <Eingabetyp="Schaltfläche" Wert="+" bei Klick="add2(this)">
            </td>
            <td class="Geld">200</td>
        </tr>
        <tr>
            <td colspan="3">Gesamtbetrag</td>
            <td id="total">5000</td>
        </tr>
    </Tabelle>
</div>
</body>
</html>

3. CSS-Code

Tabelle,th,td,tr{
    Rand: 5px, durchgehend schieferblau;
    Rahmenradius: 10px;
 
             }
#Nachteile{
    Rand: 3px durchgezogen #FFFFFF;
    Breite: 600px;
    Polsterung: 5px;
    Rahmenradius: 10px;
    Rand: 200px automatisch;
}
#Körper{
    Hintergrundfarbe: schwarz;
}
 
Tisch{
    /*Definieren Sie die zusammengeführte Anzeige der Tabellenränder*/
    /*Rahmen-Collapse: Zusammenbruch;*/
    Farbe: Aquamarin;
    Breite: 600px;
    Höhe: 200px;
    Textausrichtung: zentriert;
    border-collapse: separate;border-spacing:0;/*Die Eigenschaft border-spacing legt den Abstand zwischen den Rändern benachbarter Zellen fest (wird nur im Modus „border separate“ verwendet). */
    table-layout:fixed;/*Festes Tabellenlayout, das horizontale Layout hängt nur von der Tabellenbreite, Spaltenbreite, Tabellenrahmenbreite und dem Zellenabstand ab und hat nichts mit dem Inhalt der Zelle zu tun. */
 
}
#kg{
    Breite: 30px;
    /*Rand: 2px durchgehend weiß;*/
    Hintergrundfarbe: rot;
    Farbe: schieferblau;
 
}

4. JS-Code

// Additionsfunktion add(obj) {
    // Anzahl der Produkte abrufen var nums = obj.nextElementSibling.innerHTML /* Gibt den Wert des nächsten Geschwisterelementknotens zurück */
    wenn(Zahlen>0){
        // Klicken Sie hier, um Nums zu subtrahieren--;
        //Ersetze den ursprünglichen Wert obj.nextElementSibling.innerHTML=nums;
        // Gesamtpreiswert ändern // Stückpreis des Produkts abrufen var price =obj.parentElement.previousElementSibling.innerHTML;
        // Den Gesamtpreis des Produkts abrufen var tatol = obj.parentElement.nextElementSibling.innerHTML;
        obj.parentElement.nextElementSibling.innerHTML=parseInt(nums)*parseInt(price); //parseInt wandelt den String in einen numerischen Wert um money();
    }
 
    // konsole.log(nums);
 
}
// Subtraktionsfunktion add2(obj){
    var nums =obj.previousElementSibling.innerHTML/*Gibt den Wert des vorherigen Geschwisterelementknotens zurück*/
    wenn(Zahlen>=0){
        // Klicken Sie hier, um Nums++ hinzuzufügen.
        //Ersetze den ursprünglichen Wert obj.previousElementSibling.innerHTML=nums;
        // Gesamtpreiswert ändern // Stückpreis des Produkts abrufen var price =obj.parentElement.previousElementSibling.innerHTML;
        // Den Gesamtpreis des Produkts abrufen var tatol = obj.parentElement.nextElementSibling.innerHTML;
        obj.parentElement.nextElementSibling.innerHTML=Anzahl*Preis;
        Geld();
    }
    // console.log(Zahlen)
}
//Den Gesamtbetrag abrufen und ändern Funktion money(){
    //Zelle mit dem Gesamtbetrag abrufen var mo = document.getElementById("total");
    //Zelle mit dem Gesamtpreis des Produkts abrufen var momeys=document.getElementsByClassName("money");
    //Definieren Sie den Wert des Gesamtbetrags var sum =0;
    für(var i=0;i<momeys.length;i++){
        Summe=parseInt(momeys[i].innerHTML)+Summe;
    }
    mo.innerHTML=Summe;
    // console.log(Summe)
 
}
//Hintergrundfarbe steuern Funktion kz(){
    var Hintergrund = document.getElementById("body");
    var color = window.getComputedStyle(background,null).backgroundColor; //Hintergrundfarbe abrufen console.log(color);
    var font = document.getElementById("table"); //Schriftart var border = document.getElementById("cons"); //Rand var switch1 = document.getElementById("kg"); //Schalter //Hintergrundfarbe, Schriftfarbe, Rahmenfarbe ändern if (color=="rgb(0, 0, 0)") {
        background.style.cssText="background-color: white;"; //CSS-Stil ändern font.style.cssText="color: dimgray;";
        border.style.cssText="Rand: 3px tief schwarz";
        switch1.innerHTML="Licht ausschalten";
    }
    sonst wenn(Farbe=="rgb(255, 255, 255)"){
        background.style.cssText="Hintergrundfarbe: schwarz;";
        font.style.cssText="Farbe: Aquamarin;";
        border.style.cssText="Rand: 3px durchgezogen #FFFFFF";
        switch1.innerHTML="Licht anmachen";
    }
 
 
}

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:

Vuejs bringt Ihnen Schritt für Schritt bei, einen vollständigen Beispielcode für einen Einkaufswagen zu schreiben
Ideen und Code zur Implementierung von js-Einkaufswagen (finde ich persönlich gut)
Schreiben einer einfachen Warenkorbfunktion in JavaScript
Detaillierter Javascript-Code zur Implementierung der Warenkorbfunktion
js implementiert einen einfachen Einkaufswagen mit Bildern und Codes
Jsp+Servlet zur Realisierung der Warenkorbfunktion
Javascript manipuliert Cookies, um Warenkorbprogramm zu implementieren
Einfaches Front-End-JS+Ajax-Einkaufswagen-Framework (Anleitung für Anfänger)
Native JS-Simulation Taobao Einkaufswagen-Projektpraxis
js, um Einkaufswagen-Additions- und Subtraktionseffekte zu erzielen

<<: Docker verpackt das lokale Image und stellt es auf anderen Maschinen wieder her

>>: Beispiel einer langsamen MySQL-Abfrage