js原生代码实现购物车

一、效果展示

双击商品，如果购物车没有该商品，添加到购物车中，如果有该商品数量加1。

全选全不选

刷新后数据不会消失

二、代码展示

1、基础框架

.screen里面展示商品，.cart购物车，商品信息添加到tbody中。

    <main>
        <div class="screen">

        </div>
        <div class="cart">
            <table>
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" id="all">
                            全选
                        </th>
                        <th>商品图片</th>
                        <th>商品名称</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </main>

2、CSS样式

    * {
        margin: 0;
        padding: 0;
    }

    main {
        width: 1200px;
        margin: 40px auto;
    }

    main::after {
        content: "";
        display: block;
        clear: both;
    }

    .screen,
    .cart {
        float: left;
        border: 1px solid black;
        width: 600px;
        height: 300px;
        box-sizing: border-box;
    }

    ul {
        padding: 3px;
    }

    .screen li {
        width: 197px;
        height: 146px;
        border: 1px solid black;
        box-sizing: border-box;
        padding-top: 5px;
        float: left;
        text-align: center;
    }

    td {
        text-align: center;
    }

    td>img {
        height: 40px;
    }

    .screen img {
        height: 93px;
    }

    .red {
        color: red;
        font-weight: bold;
    }

    th {
        width: 115px;
    }

    .cart>thead {
        height: 30px;
    }

    li {
        list-style: none;
    }

3、JS代码

    var screen = document.querySelector(".screen");
    var cart = document.querySelector(".cart tbody");
    var shoppingCart = [];
    // 取出保存的数据
    var shoppingCart = localStorage.getItem("key") ? JSON.parse(localStorage.getItem("key")) : [];
    // 将取出的数据渲染到购物车内
    shoppingCart.forEach(function (item) {
        var tr = document.createElement("tr");
        var td1 = document.createElement("td");
        var td2 = document.createElement("td");
        var td3 = document.createElement("td");
        var td4 = document.createElement("td");
        var td5 = document.createElement("td");
        var img = document.createElement("img");
        var input = document.createElement("input");
        input.type = "checkbox";
        img.src = item.pictrueSrc;
        td1.append(input);
        input.className = "item"
        td2.append(img);
        td3.innerText = item.name;
        td4.innerText = item.money;
        td5.innerText = item.num;
        td5.className = "number"
        tr.append(td1);
        tr.append(td2);
        tr.append(td3);
        tr.append(td4);
        tr.append(td5);
        cart.append(tr);
    })
    // 创建一个构造函数里面存入商品信息
    function phone(pictrueSrc, name, money, num) {
        this.pictrueSrc = pictrueSrc;
        this.name = name;
        this.money = money;
        this.num = num;
    }
    var honorv10 = new phone("./images/honorv10.png", "荣耀v10", "2799", 1);
    var iphone8 = new phone("./images/iphone8.png", "苹果8", "5888", 1);
    var xiaomiMIX2 = new phone("./images/xiaomiMIX2.png", "小米MIX2", "3299", 1);
    var lenovo = new phone("./images/lenovo小新.png", "联想小新", "6299", 1);
    var Dell = new phone("./images/Dell.png", "戴尔笔记本", "5699", 1);
    var xiaomi = new phone("./images/xiaomi.png", "小米笔记本", "4999", 1);
    var wares = [honorv10, iphone8, xiaomiMIX2, lenovo, Dell, xiaomi];
    // 将商品信息渲染到页面上
    var ul = document.createElement("ul");
    wares.forEach(function (item) {
        var li = document.createElement("li");
        var p1 = document.createElement("p");
        var p2 = document.createElement("p");
        var img = document.createElement("img");
        img.src = item.pictrueSrc;
        p1.innerText = item.name;
        p2.innerText = item.money;
        p2.className = "red"
        li.append(img);
        li.append(p1);
        li.append(p2);
        ul.append(li);
    })
    screen.append(ul);
    list = document.querySelectorAll("li");
    var checkAll = document.getElementById("all");
    for (let i = 0; i < list.length; i++) {
        list[i].ondblclick = function () {
            var flag = true;
            if (!shoppingCart.length) {
                // 如果没有点击过执行点击渲染购物车
                flag = true;
            } else {
                for (j = 0; j < shoppingCart.length; j++) {
                    if (shoppingCart[j].name == wares[i].name) {
                        // 判断新数组内有点击的对象时，数量加1，不执行渲染购物车
                        var numberList = document.querySelectorAll(".number")
                        shoppingCart[j].num++;
                        numberList[j].innerText = shoppingCart[j].num;
                        flag = false;
                    }
                }
            }
            if (flag) {
                // 将点击的对象push到一个新数组
                shoppingCart.push(wares[i]);
                // 渲染购物车
                var tr = document.createElement("tr");
                var td1 = document.createElement("td");
                var td2 = document.createElement("td");
                var td3 = document.createElement("td");
                var td4 = document.createElement("td");
                var td5 = document.createElement("td");
                var img = document.createElement("img");
                var input = document.createElement("input");
                input.type = "checkbox";
                img.src = wares[i].pictrueSrc;
                td1.append(input);
                input.className = "item"
                td2.append(img);
                td3.innerText = wares[i].name;
                td4.innerText = wares[i].money;
                td5.innerText = wares[i].num;
                td5.className = "number";
                tr.append(td1);
                tr.append(td2);
                tr.append(td3);
                tr.append(td4);
                tr.append(td5);
                cart.append(tr);
            }
            localStorage.setItem("key", JSON.stringify(shoppingCart));
            var itemList = document.getElementsByClassName("item");
            // 全选全不选
            checkAll.onclick = function () {
                for (i = 0; i < itemList.length; i++) {
                    itemList[i].checked = this.checked;
                }
            }
            for (let j = 0; j < itemList.length; j++) {
                itemList[j].onclick = function () {
                    var flag1 = true;
                    for (let k = 0; k < itemList.length; k++) {
                        if (itemList[k].checked == false) {
                            flag1 = false;
                        }
                    }
                    checkAll.checked = flag1;
                }
            }
        }
    }