购物车操作页面

购物车操作页面

css样式文档main.css

html {
    background-color: #eeeeee;
}
.goodsCon {
    width: 290px;
    height: 400px;
    background-color: white;
    float: left;
    margin-left: 10px;
    margin-bottom: 10px;
    position: relative;
}
.icon {
    width: 200px;
    height: 200px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 30px;
    transition: all 0.3s;
}
.icon:hover {
    top: 20px;
}
.title {
    color: #333;
    font-size: 14px;
    margin: 20px -10px 9px;
    font-weight: 400;
    text-align: left;
    line-height: 20px;
    height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    position: absolute;
    left: 30px;
    top: 230px;
    width: 240px;
}
.info {
    position: absolute;
    top: 275px;
    left: 20px;
    color: #e01222;
    font-size: 14px;
}
.info > img {
    width: 40px;
    height: 19px;
    vertical-align: middle;
    margin-right: 10px;
}
.priceCon {
    width: 290px;
    height: 100px;
    position: absolute;
    border-top: 1px solid #eeeeee;
    top: 300px;
}
.history {
    position: absolute;
    left: 20px;
    top: 6px;
    padding: 0 8px;
    height: 16px;
    line-height: 16px;
    background-color: #e6e6e6;
    font-size: 10px;
    color: #999;
    -moz-border-radius: 2px;
    border-radius: 2px;
}
.price {
    font-size: 24px;
    color: #e01222;
    display: inline-block;
    margin-top: 25px;
    margin-left: 20px;
}
.price::first-letter {
    font-size: 14px;
}
.oldPrice {
    font-size: 12px;
    color: #999999;
    text-decoration: line-through;
    display: inline-block;
    margin-left: 6px;
}
.soldText {
    margin-left: 20px;
    font-size: 12px;
    color: #666666;
}
.soldSpan {
    width: 88px;
    height: 8px;
    display: inline-block;
    background-color: #e6e6e6;
    margin-left: 10px;
    border-radius: 4px;
}
.soldSpan > span {
    display: block;
    background-color: #e01222;
    height: 8px;
    border-radius: 4px;
}
.button {
    color: #fff;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    display: block;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto 0;
    width: 80px;
    text-align: center;
    position: absolute;
    background: #df0021;
    text-decoration: none;
}

商品信息

Goddsltem.js文档

import Utils from "./Utils.js";
// 继承EventTarget,就会有里面所有的属性和方法
// 如果类自身拥有dispatchEvent方法就必须继承EventTarget事件对象
export default class GoodsItem extends EventTarget{
    elem;
    data;
    static ADD_GOODS_EVENT="add_goods_event";
    // 创建构造函数
    constructor(_data){
    // 所有的继承都必须要有super
    super();
    // 把给进来的data对象存在全局data中
    this.data=_data;
    this.elem=this.createElem(_data);
    }
    // 给入一个参数,如果是字符串进入条件语句
    appendTo(parent){
        if(typeof parent==="string"){
        // 根据选择器获取找到的元素parent
        parent=document.querySelector(parent);
        }
        // 将所有内容添加到父容器parent里
        parent.appendChild(this.elem);
    }
    createElem(data){
        var div = Utils.ce("div");
        div.className = "goodsCon";
        var a=Utils.ce("a");
        // 给添加一个点击侦听事件，执行clickHandler函数
        a.addEventListener("click",e=>this.clickHandler(e));
        a.target="_blank";
        div.appendChild(a);
        this.createIcon(a, data.icon);
        this.createTitle(a, data.title);
        this.createInfo(a, data.info, data.selfSell);
        this.createPriceCon(div, data);
        return div;
    }
    createIcon(parent, iconPath) {
        var img = new Image();
        img.src = iconPath;
        img.className = "icon";
        parent.appendChild(img);
    }

    createTitle(parent, title) {
        var h4 = Utils.ce("h4");
        h4.className = "title";
        h4.textContent = title;
        parent.appendChild(h4);
    }

    createInfo(parent, info, selfSell) {
        var div = Utils.ce("div");
        if (selfSell) {
        var img = new Image();
        img.src = "./img/self.png";
        div.appendChild(img);
        }
        var text = document.createTextNode(info);
        div.appendChild(text);
        div.className = "info";
        parent.appendChild(div);
    }

    createPriceCon(parent, data) {
        var div = Utils.ce("div");
        div.className = "priceCon";
        this.createHistory(div, data.history);
        this.createPrice(div, data.price, data.oldPrice);
        this.createsold(div, data.sold);
        this.createButton(div, data.href);
        parent.appendChild(div);
    }

    createHistory(parent, history) {
        if(history.trim().length===0)  return;
        var div = Utils.ce("div");
        div.textContent = history;
        div.className = "history";
        parent.appendChild(div);
    }
    createPrice(parent, price, oldPrice) {
        var priceDiv = Utils.ce("span");
        priceDiv.textContent = "￥" + price;
        priceDiv.className = "price";
        var oldPriceDiv = Utils.ce("span");
        oldPriceDiv.textContent = "￥" + oldPrice;
        oldPriceDiv.className = "oldPrice";
        parent.appendChild(priceDiv);
        parent.appendChild(oldPriceDiv);
    }

    createsold(parent, sold) {
        var div = Utils.ce("div");
        var soldText = Utils.ce("span");
        soldText.textContent = `已售${sold * 100}%`;
        soldText.className = "soldText";
        div.appendChild(soldText);
        var soldSpan = Utils.ce("span");
        var soldRed = Utils.ce("span");
        soldSpan.className = "soldSpan";
        soldRed.style.width = 88 * sold + "px";
        soldSpan.appendChild(soldRed);
        div.appendChild(soldSpan);
        parent.appendChild(div);
    }
    createButton(parent, href) {
        var a = Utils.ce("a");
        // a.href = href;
        a.addEventListener("click",e=>this.clickHandler(e));
        a.textContent = "立即抢购";
        a.className = "button";
        a.target="_blank";
        parent.appendChild(a);
    }
    // 点击事件函数
    clickHandler(e){
        // 创建一个事件
        var evt=new Event(GoodsItem.ADD_GOODS_EVENT);
        // 自己给抛发自己创建的事件
        this.dispatchEvent(evt);
    }
}

数量选择框

StepNumber.js文档

import Utils from "./Utils.js";

export default class StepNumber{
    elem;
    input;
    ids;
    step = 1;
    obj;
    constructor(_obj) {
        this.obj=_obj;
        this.elem = this.createElem();
    }

    createElem() {
        let div = Utils.ce("div", {
            width: "80px",
            height: "22px",
            position: "relative",
            margin:"auto"
        });
        this.createBnList(div);
        this.cteateInput(div);
        return div;
    }
    createBnList(parent) {
        var leftBn = Utils.ce("div", {
            width: "15px",
            height: "20px",
            position: "absolute",
            textAlign: "center",
            userSelect: "none",
            backgroundColor:"#FFF",
            border: "1px solid #CCCCCC"
        });
        var rightBn = leftBn.cloneNode(false);
        leftBn.style.left = "0px";
        rightBn.style.right = "0px";
        leftBn.textContent = "-";
        rightBn.textContent = "+";
        parent.appendChild(leftBn);
        parent.appendChild(rightBn);
        leftBn.addEventListener("click", e => this.clickHandler(e));
        rightBn.addEventListener("click", e => this.clickHandler(e));
    }
    cteateInput(parent) {
        this.input = Utils.ce("input", {
            width: "46px",
            height: "18px",
            position: "absolute",
            left: "17px",
            border: "none",
            textAlign: "center",
            borderTop: "1px solid #CCCCCC",
            borderBottom: "1px solid #CCCCCC"
        });
        this.input.value = "1";
        parent.appendChild(this.input);
        this.input.addEventListener("input", e => this.inputHandler(e));
    }
    appendTo(parent) {
        if (typeof parent === "string") {
            parent = document.querySelector(parent);
        }
        parent.appendChild(this.elem);
    }

    inputHandler(e) {
        this.input.value = this.input.value.replace(/\D/g, "");
        // 节流
        if (this.ids) return;
        this.ids = setTimeout(() => {
            clearTimeout(this.ids);
            this.ids = 0;
            this.setStep(this.input.value);
            this.dispatch();
        }, 500);
    }

    clickHandler(e) {
        if (e.currentTarget.textContent === "-") {
            this.setStep(this.step - 1);
        } else {
            this.setStep(this.step + 1);
        }
        this.dispatch();
    }

    setStep(value) {
        value = Number(value);
        if (value < 1) value = 1;
        if (value > 999) value = 999;
        this.step = value;
        this.input.value = this.step;
    }
    // 抛发事件
    dispatch(){
        var evt=new Event("step_change");
        evt.step=this.step;
        evt.elem=this.elem;
        evt.obj=this.obj;
        document.dispatchEvent(evt);
    }
}

创建容器

Utils.js文档

export default class Utils{
    static ce(type,style){
        let elem=document.createElement(type);
        Object.assign(elem.style,style);
        return elem;
    }
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .divs{
            width: 1200px;
            margin: auto;
        }
        /* 设置表格样式 */
        .tables{
            width: 1200px;
            /* 合并单元格边框 */
            border-collapse: collapse;
            margin: auto;
            font-size: 12px;
            color: #666666;
        }
        /* 设置表格第一行样式 */
        .thr{
            background-color: #f3f3f3;
            color: #666666;
            font-size: 12px;
            height: 50px;
            border: 1px solid #ccc;
        }
        /* 设置多选框样式 */
        [type=checkbox]{
            /* 垂直居中 */
            vertical-align: middle;
        }
        /* 设置表头单元格样式 */
        .thr > th:nth-child(1) {
            width: 60px;
        }
        .thr > th:nth-child(2) {
            width: 120px;
        }
        .thr > th:nth-child(3) {
            width: 300px;
        }
        .thr > th:nth-child(4) {
            width: 180px;
        }
        .thr > th:nth-child(5) {
            width: 120px;
        }
        .thr > th:nth-child(6) {
            width: 180px;
        }
        .thr > th:nth-child(7) {
            width: 120px;
        }
        /* 设置超链接样式 */
        a {
            text-decoration: none;
        }
        a {
            color: #666666;
        }
        td>a:hover{
            color: red;
        }
        tr {
            background-color: #fff4e8;
            border: 1px solid #cccccc;
        }
        .sumValue{
            font-size: 24px;
            color: red;
            text-align: right;
            padding-right: 120px;
        }
        .Sum{
            width: 200px;
        }
    </style>
    <!-- 引入css样式文档 -->
    <link href="./css/main.css" rel="styleSheet">
</head>
<body>
    <div class="divs"></div>
    <script type="module">
        import GoodsItem from "./js/GoodsItem.js";
        import Utils from "./js/Utils.js";
        import StepNumber from "./js/StepNumber.js";
        var goodsList = [
                {
                id: 1001,
                icon: "./img/a.jpg",
                title: "水悟月【请财运】和田玉聚财貔貅",
                info: "送手串 顺丰发货",
                selfSell: false,
                history: "1年历史最低价",
                oldPrice: "993",
                price: "298",
                sold: 0.8,
                href: "https://item.jd.com/34622502992.html",
                },
                {
                id: 1002,
                icon: "./img/b.jpg",
                title: "YAYA鸭鸭服饰时尚卫衣休闲裤套装",
                info: "125元2套185元3套",
                selfSell: false,
                history: "49天历史最低价",
                oldPrice: "199",
                price: "65",
                sold: 0.97,
                href: "https://item.jd.com/100005009278.html",
                },
                {
                id: 1003,
                icon: "./img/c.jpg",
                title: "MK羊皮革黑色斜挎包",
                info: "",
                selfSell: true,
                history: "51天历史最低价",
                oldPrice: "2280",
                price: "1550",
                sold: 0.34,
                href: "https://item.jd.com/34622502992.html",
                },
                {
                id: 1004,
                icon: "./img/d.jpg",
                title: "卡帝乐鳄鱼|99元超值5件装",
                info: "99元5件|100%纯棉",
                selfSell: false,
                history: "",
                oldPrice: "288",
                price: "99",
                sold: 0.99,
                href: "https://item.jd.com/100005009278.html",
                },
                {
                id: 1005,
                icon: "./img/e.jpg",
                title: "【限量抢】男童女童薄款牛仔防蚊裤|99元超值5件装",
                info: "2条9折",
                selfSell: false,
                history: "30天历史最低价",
                oldPrice: "98",
                price: "39",
                sold: 0.25,
                href: "https://item.jd.com/34622502992.html",
                },
                {
                id: 1006,
                icon: "./img/f.jpg",
                title: "迪士尼幼儿科学大揭秘绘本全12册",
                info: "同享每满100减50",
                selfSell: true,
                history: "32天历史最低价",
                oldPrice: "126",
                price: "100",
                sold: 0.36,
                href: "https://item.jd.com/100005009278.html",
                },
                {
                id: 1007,
                icon: "./img/g.jpg",
                title: "上林春天 实木书桌带书架",
                info: "下单送台灯",
                selfSell: false,
                history: "331天历史最低价",
                oldPrice: "658",
                price: "588",
                sold: 0.26,
                href: "https://item.jd.com/34622502992.html",
                },
                {
                id: 1008,
                icon: "./img/h.jpg",
                title: "买一送一\薄款休闲裤男特价78元",
                info: "限时抢购200条",
                selfSell: false,
                history: "",
                oldPrice: "158",
                price: "78",
                sold: 0.99,
                href: "https://item.jd.com/100005009278.html",
                },
            ];
        
        // 数据驱动显示
        
        // 全局变量table
        var table;
        // 表头内容
        var headTilte = ["全选", "", "商品", "", "单价", "数量", "小计", "操作"];
        // 新建一个空数组
        var data=[];

        init();
        function init(){
            // 侦听./js/StepNumber.js封装的文档中的抛发的事件
            document.addEventListener("step_change",StepChangeHandler);
            goodsList.forEach(item=>{
                // 实例化对象，执行GoodsItem类型中constructor方法
                // 并将数组里面的每一项带进去
                // 创建好的对象goods具备这个类别的所有方法
                let goods=new GoodsItem(item);
                // 将.divs(类名)作为作为父容器参数给入进去，将所有的内容添加到父容器中
                goods.appendTo(".divs");
                // 侦听自己创建的事件(接收抛发的事件)
                goods.addEventListener(GoodsItem.ADD_GOODS_EVENT,addGoodsHandler);
            });
            
        }
        
        function addGoodsHandler(e){
            // this.data就是goodsList数组中每一个对象
            var o = this.data;
            // 为了避免每次点击商品进行重复显示
            // 拿到数组中的每一项，进行过滤
            var arr=data.filter(item=>{
                // 将找到的id如果相同就返回出去到新数组中
                return item.id===o.id;
            });
            // 当数组的长度为0时也就是没有找到
            if(arr.length===0){
                // 新建一个对象，将我们需要的内容进行修改
                var obj={
                    id:o.id,
                    selected: false,
                    icon: o.icon,
                    title: o.title,
                    info: o.info,
                    price: Number(o.price),
                    num: 1,
                    sum: Number(o.price),
                    del: false,
                };
                // 将创建好的对象添加到数组中
                data.push(obj);
            
            // 新的数组的引用地址对象和之前的引用地址相同
            // 更改arr数组的第0项里面的属性值，就相当于更改data里面的属性值
            }else{
                // 当找到相同时,就添加到arr数组中，arr[0]始终都是找到的第一个
                // 找到多少个就把num(数量)进行++，同时修改了data数组里面对象的num的数量
                arr[0].num++;
                arr[0].sum=arr[0].num*arr[0].price;
            }
            // 当有了数据之后，再去根据数据去创建表格
            // 执行函数createTable()
            createTable();
        }
        
        // 搭建表格
        function createTable(){
            // 每次点击都会创建新的表格造成重复，为了避免这种情况，当再次点击时就将之前创建好的进行删除
            if(table){
                // 删除
                table.remove();
                // 设为空，切断引用关系
                table=null;
            }
            // 创建table表格
            table=Utils.ce("table");
            // 添加类名tables
            table.className="tables";
            // 将创建好的表格标签填入到body中
            // 创建表头
            createHead(table);
            // 创建内容
            createContent(table);
            // 创建表尾
            createTableFoot(table);
            document.body.appendChild(table);
        }
        
        // 创建表头
        function createHead(parent){
            // 创建tr行标签
            var tr=Utils.ce("tr");
            // 循环将数组中的内容添加到表头每个单元格
            for(var i=0;i<headTilte.length;i++){
                // 如果条件满足continue，不执行下面的创建th
                if(i===1 || i===3) continue;
                // 创建th标签，也就是表格标题
                var th=Utils.ce("th");
                // 一个单元格和第二个单元格进行合并
                // 第三个单元和第四个单元格进行合并
                // 让表格的数据相对应
                if(i===0 || i===2) th.setAttribute("colspan","2");
                // 将数组里面的每一项内容添加到对应的表头单元格中
                th.textContent=headTilte[i];
                // 如果数组中的元素是全选这个字符串时
                if(headTilte[i]==="全选"){
                    // 创建一个input标签
                    var ck=Utils.ce("input");
                    // 标签类型为全选框
                    ck.type="checkbox";
                    // 将当前元素判断每一个selected是不是true
                    // 如果都是true就checked设置为true
                    ck.checked=data.every(item=>item.selected);
                    // 给ck也就是多选框添加点击事件
                    ck.addEventListener("click",selectedClickHandler);
                    // 将全选框添加到单元格中
                    th.appendChild(ck);
                    // 将这个ck这个全选框插入到这个单元格里面内容的前面
                    th.insertBefore(ck,th.firstChild);
                }
                // 将th标签添加到父容器tr行标签中
                tr.appendChild(th);
            }
            // tr第一行表头添加类名thr，设置css样式
            tr.className="thr";
            // 将tr行标签添加到父容器table标签中
            parent.appendChild(tr);
        }

        // 创建表格里面内容
        function createContent(parent){
            // 循环数组
            for(var i=0;i<data.length;i++){
                // 数组的里面的每一项就是一个对象
                var obj=data[i];
                // 创建行标签
                var tr=Utils.ce("tr");
                tr.style.height="100px";
                // 遍历对象
                for(var prop in obj){
                    // 不创建id属性这个单元格
                    if(prop==="id") continue;
                    // 创建td单元格标签
                    var td=Utils.ce("td");
                    // 通过遍历将对象里面的属性值放入到创建好的td单元格中
                    // td.textContent=obj[prop];
                    // 创建每个td里面的内容
                    createTdContent(td,obj,prop);
                    // 将创建好的td标签放入到tr行标签中
                    tr.appendChild(td);
                }
                parent.appendChild(tr);
            }
        }

        // 创建每个td里面的内容
        function createTdContent(td,obj,prop){
            // 判断条件对象里面的每个属性
            switch(prop){
                // 当属性是selected时,添加多选框
                case "selected":
                    var ck=Utils.ce("input");
                    ck.type="checkbox";
                    // 多选框ck就是一个对象，多了obj属性
                    // 属性下面就有obj对象的所有属性和值
                    ck.obj=obj;
                    // 在创建多选框时，将true或者fasle设置给了这个元素
                    ck.checked=obj[prop];
                    // 给ck也就是多选框添加点击事件
                    ck.addEventListener("click",selectedClickHandler);
                    // 将多选框添加到td单元格中
                    td.appendChild(ck);
                    // 设置td单元格左边padding值为10px
                    td.style.paddingLeft="10px";
                    break;
                break;
                // 当属性是icon时,添加图片
                case "icon":
                    var img=new Image();
                    // 添加图片路径也就是对象中icon属性的属性值
                    img.src=obj[prop];
                    // 设置图片宽高大小
                    img.style.width = "80px";
                    img.style.height = "80px";
                    // 将图片添加到td单元格中
                    td.appendChild(img);
                    break;
                break;
                // 当属性是price时,添加价格内容,进行穿透
                case "price":
                // 当属性是sum时,添加价格内容
                case "sum":
                    // td单元格添加文本内容
                    // 先将属性值转换为数值，保留两位小数
                    td.textContent="￥"+Number(obj[prop]).toFixed(2);
                    // 设置文本内容靠右
                    td.style.textAlign="center";
                    break;
                break;
                // 当属性是del时,添加删除按钮
                case "del":
                    // 创建一个a标签超链接
                    var a = Utils.ce("a");
                    // 阻止超链接跳转
                    a.href = "javascript:void(0)";
                    // 添加文本内容删除
                    a.textContent = "删除";
                    // 超链接a就是一个对象，多了obj属性
                    // 属性下面就有obj对象的所有属性和值
                    a.obj=obj;
                    // 给超链接添加点击事件
                    a.addEventListener("click",delClickHandler);
                    // 创建创建好的a标签添加到td单元格中
                    td.appendChild(a);
                    // 设置文本内容居中
                    td.style.textAlign="center";
                break;
                // 当属性是num时,添加数量
                case "num":
                    // 引入封装的StepNumber文件
                    // 实例化对象，执行StepNumber类型中constructor方法
                    // 创建好的对象step具备这个类别的所有方法
                    // 通过将obj作为参数带入StepNumber中，再将obj抛出来接收
                    let step=new StepNumber(obj);
                    step.appendTo(td);
                    // 将obj[prop]值写入进去
                    step.setStep(obj[prop]);
                break;
                default:
                    td.textContent=obj[prop];
                    td.style.textAlign = "center";
            }
        }
        
        // 创建表尾
        function createTableFoot(parent){
            // 创建tr行标签放入到table表格中
            var tr=Utils.ce("tr");
            tr.style.height="80px";
            // 循环生成5个td单元格
            for(var i=0;i<5;i++){
                var td=Utils.ce("td");
                // 当i=0，就执行创建删除购物车函数
                if(i===0) createDelShopping(td);
                // 当i=2，执行创建选择商品数量函数
                if(i===2) createShoppingCount(td);
                // 当i=3，执行创建商品总价函数
                if(i===3) createSum(td);
                // 当i=4，执行创建结算函数
                if(i===4) createSubmit(td);
                tr.appendChild(td);
            }
            parent.appendChild(tr);
        }

        // 创建删除购物车
        function createDelShopping(td){
            // 创建一个多选框
            var ck=Utils.ce("input");
            ck.type="checkbox";
            // 调整位置
            ck.style.marginLeft="12px";
            // 将当前元素判断每一个selected是不是true
            // 如果都是true就checked多选框选中设置为true
            ck.checked=data.every(item=>item.selected);
            // 添加点击事件，执行selectedClickHandler函数
            ck.addEventListener("click",selectedClickHandler);
            // 将创建好的元素添加到单元格中
            td.appendChild(ck);
            // 单元格进行合并，合并4个
            td.setAttribute("colspan","4");
            // 创建一个span标签
            var span=Utils.ce("span");
            // 添加文本内容
            span.textContent="全选";
            // 创建a标签
            var a=Utils.ce("a");
            // 添加文本内容
            a.textContent="删除选中商品";
            // 设置内联样式
            a.style.marginLeft="5px";
            // 阻止超链接跳转
            a.href = "javascript:void(0)";
            // 添加点击事件，执行函数进行删除
            a.addEventListener("click",deleteClickHandler);
            td.appendChild(a);

            // 创建一个a标签
            var a=Utils.ce("a");
            // 添加文本内容
            a.textContent="清理购物车";
            // 设置内联样式
            a.style.marginLeft="5px";
            // 阻止超链接跳转
            a.href="javascript:void(0)";
            // 添加点击事件，执行函数进行清除购物车
            a.addEventListener("click",deleteClickHandler);
            td.appendChild(a);
        }

        // 创建选择商品数量
        function createShoppingCount(td){
            // 创建三个span，填入不同的内容
            var span1=Utils.ce("span");
            span1.textContent="已选择";
            var span2=Utils.ce("span",{
                color:"red",
            });
            // 所有选中的商品筛选出来赋给数组，数组的长度就是选中的商品的数量
            span2.textContent=data.filter(item=>item.selected).length;
            var span3=Utils.ce("span");
            span3.textContent="件商品";
            td.appendChild(span1);
            td.appendChild(span2);
            td.appendChild(span3);
        }

        // 创建商品总价
        function createSum(td){
            // 创建span标签
            var span=Utils.ce("span",{
                fontSize:"18px"
            });
            // 添加文本内容
            span.textContent="总价:";
            // 创建span，并且设置css样式
            var span1=Utils.ce("span",{
                fontSize:"24px",
                color:"red",
                // marginLeft:"20px"
            });
            // 添加文本内容
            // 计算数组元素sum相加的总和
            span1.textContent="￥"+data.reduce((value,item)=>{
                // 当item.selected为true时也就是选中的商品，将累加的值返回出去
                if(item.selected) return value+item.sum;
                return value;
            },0).toFixed(2);
            td.className="Sum";
            td.appendChild(span);
            td.appendChild(span1);
        }
        // 创建结算
        function createSubmit(td){
            var span=Utils.ce("span",{
                fontSize:"24px",
                color:"red",
                marginLeft:"20px",
                border:"1px solid #fff",
                backgroundColor:"#666"
            });
            span.textContent="结算";
            td.appendChild(span);
        }

        // 点击删除事件函数
        function delClickHandler(e){
            data=data.filter(item=>{
                // 事件侦听对象下面的id不等于数组中的id时进行筛选出去
                // 如果不相等就return返回到数组中，相等就不用管了
                // 数组中就没有这一项了，然后重新创建表格就完成删除
                return e.currentTarget.obj.id!==item.id;
            });
            // 当数据更改时，重新再创建表格
            createTable();
        }
        
        // 点击全选框事件函数
        function selectedClickHandler(e){
            var ck=e.currentTarget;
            // 如果ck.obj存在时，ck.checked也就是选中或为选中这个值赋给了ck.obj.selected
            // 也就是true或者fasle
            if(ck.obj){
                ck.obj.selected=ck.checked;
            // 表头里面的ck是没有obj对象的所以当不存在时
            // 遍历data数组里面所有的对象里面的selected属性改成checked值
            }else{
                data.forEach(item=>{
                    item.selected=ck.checked;
                });
            }
            // 设置完后，就重建表格
            createTable();
        }
        
        // 自定义修改数量函数
        function StepChangeHandler(e){  
            // 将当前事件对象下obj属性下的id属性赋给变量id
            var id=e.obj.id;
            // e.step就是文本框里面的值赋给变量num
            var num=e.step;
            data.forEach(item=>{
                // 遍历数组下面的所有属性
                // 当数组中里面的id属性等于当前事件对象下obj属性下的id属性时
                if(item.id===id){
                    // 将赋值好的sum值赋给数组中sum的值进行修改，因为引用地址相同
                    item.num=num;
                    // 用sum值去乘以单价得到总计值
                    item.sum=num*item.price;
                }
            })
            // 设置完后，就重建表格
            createTable();
        }
        
        // 删除事件函数
        function deleteClickHandler(e){
            // 当点击的目标对象的文本内容是删除选中商品时
            if(e.currentTarget.textContent==="删除选中商品"){
                // 如果item.selected是false(也就是多选框未选中)就放入到data数组里
                // 其它选中的就筛选出去了，重建表格后也就是删除了没有了
                data=data.filter(item=>{
                    return !item.selected;
                });
            // 如果需要全部清空，直接将数组的长度设为0，重建表格后数据为空了，也就是全部删除了
            }else{
                data.length=0;
            }
            createTable();
        }
    </script>
</body>
</html>