购物车：

购物车：
数量组件：

class StepNum {
    constructor(parent, data) {
        this._data = data;
        this.num = data.num;
        this.step = 1;
        this.evt = new Event(StepNum.CHANGENUM);
// this.flag = false;
        if (!parent) parent = document.body;
        this.div = this.createDiv(parent);
        this.animate();
    }
    createDiv(parent) {
        if (this.div) return this.div;
        let div = document.createElement('div');
        div.className = 'quantity-form';
        div.evt = new Event(StepNum.CHANGENUM);
        Object.assign(div.style, {
            // fontSize: '0',
            textAlign: 'center',
            position: 'absolute',
            overflow: 'hidden',
        })
        let divCon = document.createElement('div');
        let p1 = document.createElement('p');
        p1.textContent = this.num;
// let p2 = document.createElement('p');
// p2.textContent = 2;
        Object.assign(divCon.style, {
            position: 'absolute',
            top: '0',
            left: '17px',
            width: '47px',
            backgroundColor: '#fff',
            textAlign: 'center',
            fontSize: '13px',
        })
        Object.assign(p1.style, {
            margin: '0',
            lineHeight: '22px',
        })
        divCon.appendChild(p1);
        div.appendChild(divCon);
        this.leftBtn = this.createBtn(div);
        this.leftBtn.className = 'reduce';
        this.leftBtn.textContent = '-';
        this.leftBtn.disabled = this.num>1?false:true;
        // this.leftBtn.disabled = true;
// this.createNumInput(div);
        this.input = this.createNumInput(div);
        this.rightBtn = this.createBtn(div);
        this.rightBtn.className = 'increase';
        this.rightBtn.textContent = '+';
// this.leftBtn.input =  input;
// this.rightBtn.input = input;
        this.leftBtn.divCon = divCon;
        this.rightBtn.divCon = divCon;
        divCon.input = this.input;
        this.input.divCon = divCon;
// divCon.add = true;
        divCon.self = this;
        div.self = this;
        parent.appendChild(div);
        return div;
    }

    setNum(num) {
        this.input.value = num;
        this.num = num;
        this.div.firstElementChild.firstElementChild.textContent = num;
        // this.evt = new Event(StepNum.CHANGENUM);
        // 触发事件，传递参数
        this.evt.data = this._data;
        this.evt.num = num;
        document.dispatchEvent(this.evt);
    }

    createBtn(parent) {
        let btn = document.createElement('button');
        let btnStyle = {
            outline: 'none',
            border: '1px solid #ddd',
            padding: '0',
            height: '22px',
            width: '17px',
            cursor: 'pointer',
            position: 'relative'
        };
        Object.assign(btn.style, btnStyle);
        parent.appendChild(btn);
        btn.addEventListener('click', this.clickHandler);
        this.end = true;
        return btn;
    }

    clickHandler(e) {
        this.divCon.style.opacity = '1';
        if (this.parentNode.self.flag === true) return;
// 隐藏input的value值
        this.parentNode.self.input.value = '';
        this.parentNode.self.input.style.backgroundColor = 'rgba(255,255,255,.3)';
// 点击加减
// 点击 - 就在p的前面增加一个p top 移动到 0px 然后删除最后一个p
// 点击 + 就在p的后面增加一个p top移动到-22px 然后删除第一个p

        if (this === this.parentNode.self.leftBtn) {
// if(this.parentNode.self.num<2){
//     this.disabled = true;
//     return;
// };
            this.divCon.style.top = '-22px';
//     this.divCon.flag = false;
            this.parentNode.self.num--;
            let p2 = document.createElement('p');
            Object.assign(p2.style, {
                margin: '0',
                lineHeight: '22px',
            })
            p2.textContent = this.parentNode.self.num;
            this.divCon.insertBefore(p2, this.divCon.firstElementChild);
            this.divCon.add = false;
            if (this.parentNode.self.num === 1) {
                this.disabled = true;
            }
//
//     this.disabled = false;
//
        } else {
// 点击了+
//     this.divCon.flag = true;
            this.parentNode.self.leftBtn.disabled = false;
            this.parentNode.self.num++;
            let p2 = document.createElement('p');
            Object.assign(p2.style, {
                margin: '0',
                lineHeight: '22px',
            })
            p2.textContent = this.parentNode.self.num;
            this.divCon.add = true;
            this.divCon.appendChild(p2);
// this.divCon.style.top = '-22px';
//     // 1s 后删除
        }
// console.log(this.parentNode.self);
        this.parentNode.self.flag = true;
        // 修改数据
        this.parentNode.self._data.num = this.parentNode.self.num;
        this.parentNode.self._data.sum = Number(this.parentNode.self._data.num)*Number(this.parentNode.self._data.price);
// this.parentNode.self.end = false;
// 抛出

        // this.parentNode.self.evt.data = this.parentNode.self._data;
        // this.parentNode.self.evt.num = num;
        // document.dispatchEvent(this.parentNode.self.evt);
    }

    createNumInput(parent) {
        let input = document.createElement('input');
// input.value = 1;
        Object.assign(input.style, {
            outline: 'none',
            textAlign: 'center',
            padding: '0',
            boxSizing: 'border-box',
            border: '1px solid #ddd',
            height: '22px',
            width: '46px',
            backgroundColor: 'rgba(255,255,255,.3)',
            borderLeftWidth: '0',
            borderRightWidth: '0',
            position: 'relative',
            color: 'rgba(0,0,0,.8)',
            fontSize: '13px'
        }),
            parent.appendChild(input);
        input.addEventListener('blur', this.blurHandler);
        input.addEventListener('focus', this.focusHandler);
        return input;
    }

    focusHandler(e) {
        this.value = '';
        this.style.backgroundColor = 'rgb(255,255,255)';
        this.style.opacity = 1;
        this.divCon.style.opacity = '0';
    }

    blurHandler(e) {
// 改变数据时将数据抛出；
// 是数字 且大于1
        if (isNaN(this.value) || parseInt(this.value) < 1 || !this.value) {
            if(!this.parentNode.self.note){
                this.parentNode.self.note = this.parentNode.self.createNote(this.parentNode.self.div);
                console.log(this.parentNode.self.note);
            }
            this.parentNode.self.note.style.display = 'block';
            this.parentNode.self.setNum(1);
// this.value = 1;
            this.parentNode.self.leftBtn.disabled = true;
        } else if (this.value === '1') {
            this.parentNode.self.setNum(1);
            this.parentNode.self.leftBtn.disabled = true;
        } else {
            this.parentNode.self.setNum(this.value);
            this.parentNode.self.leftBtn.disabled = false;
        }
    }

    createNote(parent, text = '商品数量超限') {
        if(this.note) return this.note;
        let div = document.createElement('div');
        Object.assign(div.style, {
            backgroundColor: '#fff',
            border: '1px solid #ddd',
            textAlign: 'center',
            position: 'fixed',
            zIndex: '1000',
            transform: 'translate(-50%,-50%)',
            left: '50%',
            top: '50%',
            display:'none'
        })
        let p = document.createElement('p');
        p.textContent = text;
        p.style.margin = '60px 60px 0';

        let pCon = document.createElement('p');
        pCon.style.margin = '40px';

        let a = document.createElement('a');
        a.addEventListener('click', function () {
            this.parentElement.parentElement.style.display = 'none';
        })
        Object.assign(a.style, {
            textDecoration: 'none',
            backgroundColor: 'red',
            display: 'inline-block',
            padding: '10px 20px',
            color: 'rgb(255, 255, 255)',
        })
        a.href = 'javascript:;';
        a.textContent = '知道了';
        Object.assign(a.style, {
            backgroundColor: 'red',
            padding: '10px 20px',
            color: '#fff',
        })
        pCon.appendChild(a);
        div.appendChild(p);
        div.appendChild(pCon);
        parent.appendChild(div);
        return div;
    }

    static get CHANGENUM() {
        return 'changenum';
    }

    animate() {
        requestAnimationFrame(this.animate.bind(this));
// 当点击了按钮时 改变flag；
        if (!this.flag) return;
        if (this.div.firstElementChild.add) {
// +
            if (this.div.firstElementChild.offsetTop <= -22) {
                console.log('滚动结束');
                this.flag = false;
                this.div.firstElementChild.firstElementChild.remove();
                this.div.firstElementChild.style.top = '0';
                this.div.evt.data = this._data;
                this.div.evt.num = this.div.firstElementChild.firstElementChild.textContent;
                document.dispatchEvent(this.div.evt);
                return;
            }
            this.div.firstElementChild.style.top = this.div.firstElementChild.offsetTop - this.step + 'px';
        } else {
// -
            if (this.div.firstElementChild.offsetTop >= 0) {
                this.flag = false;
                this.div.firstElementChild.lastElementChild.remove();
                this.div.firstElementChild.style.top = '0';
                this.div.evt.data = this._data;
                this.div.evt.num = this.div.firstElementChild.firstElementChild.textContent;
                document.dispatchEvent(this.div.evt);
                return;
            }
            this.div.firstElementChild.style.top = this.div.firstElementChild.offsetTop + this.step + 'px';
        }
    }
}

购物列表：

class GoodsItem{
   constructor(_props,parent){
      this.prop = _props;
      this.goods=this.initGoods(parent);
      this.render(_props);
   }
   initGoods(parent){
      if(this.goods) return this.goods;
      let div=document.createElement("div");
      Object.assign(div.style,{
         width: "290px",
         height: "390px",
         marginLeft: "10px",
         marginBottom: "20px",
         backgroundColor: "white",
         position: "relative",
         float:"left"
      });
      this.createImgGoods(div);
      this.createPriceCon(div);
      parent.appendChild(div);
      return div;
   }
   createImgGoods(parent){
      let div=document.createElement("div");
      Object.assign(div.style,{
         textAlign: "center",
         height: "330px",
         width: "100%",
         position: "relative"
      });
      this.goodsImg=new Image();
      Object.assign(this.goodsImg.style,{
         width:'85%',
         marginTop: "20px",
         transition: "all 1s",
      });
      this.goodsInfo=document.createElement("p");
      Object.assign(this.goodsInfo.style,{
         fontSize: "14px",
         width: "230px",
         overflow: "hidden",
         height: "40px",
         left: 0,
         right: 0,
         margin: "auto",
         position: "absolute",
         lineHeight: "22px",
         bottom: "10px"
      });
      div.appendChild(this.goodsImg);
      div.appendChild(this.goodsInfo);
      div.addEventListener("mouseenter",this.mouseHandler);
      div.addEventListener("mouseleave",this.mouseHandler);
      parent.appendChild(div);
   }
   createPriceCon(parent){
      let div=document.createElement("div");
      Object.assign(div.style,{
         border: "2px solid #e01222",
         height: "58px",
         width: "286px",
         bottom: 0,
         position: "absolute"
      });
      let priceDiv=document.createElement("div");
      this.goodsBn=document.createElement("div");
      Object.assign(this.goodsBn.style,{
         width: "87px",
         height: "58px",
         position: "absolute",
         right: 0,
         top:0,
         color: "white",
         fontSize: "16px",
         textAlign: "center",
         lineHeight: "58px",
         cursor: "pointer",
         backgroundColor: "#e01222"
      });
      this.goodsBn.textContent="立即抢购";
      this.goodsBn.self = this;
      this.createPriceDiv(priceDiv);
      div.appendChild(priceDiv);
      div.appendChild(this.goodsBn);
      this.goodsBn.addEventListener("click",this.clickHandler);

      parent.appendChild(div);
   }
   createPriceDiv(parent){
      let priceDivs=document.createElement("div");
      let soldDivs=document.createElement("div");
      this.nowPrice=document.createElement("span");
      this.initPrice=document.createElement("span");
      priceDivs.appendChild(this.nowPrice);
      priceDivs.appendChild(this.initPrice);
      this.percent=document.createElement("span");
      let percentCon=document.createElement("span");
      this.soldPercent=document.createElement("span");
      percentCon.appendChild(this.soldPercent);
      soldDivs.appendChild(this.percent);
      soldDivs.appendChild(percentCon);
      Object.assign(this.percent.style,{
         fontSize: "16px",
         marginLeft:"10px",
         lineHeight:"10px"
      });
      Object.assign(this.nowPrice.style,{
         fontSize: "24px",
         color: "#e01222",
         marginLeft: "5px",
         lineHeight: "35px"
      });
      Object.assign(this.initPrice.style,{
         fontSize: "14px",
         textDecoration: "line-through",
         marginLeft: "5px"
      });
      Object.assign(percentCon.style,{
         display: "inline-block",
         width: "100px",
         height: "10px",
         border: "1px solid #e01222",
         marginLeft:"20px",
         marginTop:"5px",
         position: "absolute"
      });
      Object.assign(this.soldPercent.style,{
         position: "absolute",
         width: "0%",
         height: "10px",
         top:0,
         bottom: 0,
         backgroundColor: "#e01222"
      });
      parent.appendChild(priceDivs);
      parent.appendChild(soldDivs);
   }
   mouseHandler(e){
      if(e.type==="mouseenter"){
         this.firstElementChild.style.marginTop="0px";
      }else if(e.type==="mouseleave"){
         this.firstElementChild.style.marginTop="20px";
      }
   }
   clickHandler(e){
      // 点击添加购物车，这里是要向外抛发事件，并且用event将数据传出；
      let evt = new Event(GoodsItem.ADD_SHOPPING_CAR);
      evt.data = this.self.prop;
      document.dispatchEvent(evt);
   }
   render(_props){
      this.goodsImg.src=_props.icon;
      this.goodsInfo.textContent=_props.goods;
      this.nowPrice.textContent="￥"+_props.nowPrice;
      this.initPrice.textContent="￥"+_props.initPrice;
      this.goodsBn.id=_props.id;
      if(_props.sold>1) return;
      this.percent.textContent=(_props.sold*100).toFixed(2)+"%";
      this.soldPercent.style.width=_props.sold*100+"%";

   }
   static get ADD_SHOPPING_CAR(){
      return 'add_shopping_car';
   }
}

购物页面：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>类与其他之间的事件抛发</title>
    <script src="./goodItem.js"></script>
    <scrip src="./stepNum.js"></scrip>
</head>
<body>
    <div>
        <button>
            进入购物车
        </button>
<!--        <a href='' target="_blank">进入购物车</a>-->
    </div>
<script>
    let shoppinglist = [];
    let data=[
        {id:1001,icon:"imgs/03.jpg",goods:"德国DMK进口牛奶 欧德堡（Oldenburger）超高温处理全脂纯牛奶1L*12盒",info:"1L*12",nowPrice:139,initPrice:156,sold:0.5},
        {id:1002,icon:"imgs/04.jpg",goods:"帮宝适(Pampers)超薄干爽绿帮纸尿裤L164片(9-14kg)大码 尿不湿箱装",info:"L【9-14kg】",nowPrice:225,initPrice:275,sold:0.5},
        {id:1003,icon:"imgs/05.jpg",goods:" 意大利进口 百乐可（BALOCCO） 千层酥饼 脆皮酥薄脆饼干 焦糖味 200g",info:"焦糖脆皮酥200g",nowPrice:27.9,initPrice:40,sold:0.5},
        {id:1004,icon:"imgs/06.jpg",goods:"百草味 坚果零食干果 每日坚果 奶油味夏威夷果200g/袋（内含开果器）",info:"夏威夷果奶油味200g/袋",nowPrice:16.9,initPrice:30,sold:0.5},
        {id:1005,icon:"imgs/07.jpg",goods:"三星 Galaxy S10 8GB+512GB炭晶黑（SM-G9730）3D超声波屏下指纹超感官全视屏骁龙855双卡双待全网通4G游戏手机 ",info:"炭晶黑\n8GB+512GB",nowPrice:7699,initPrice:9899,sold:0.5},
        {id:1006,icon:"imgs/01.jpg",goods:"罗技（G）G102 游戏鼠标 8000DPI RGB鼠标 黑色 吃鸡鼠标 绝地求生",info:"G102有线游戏鼠标 黑色",nowPrice:119,initPrice:146,sold:0.5},
        {id:1007,icon:"imgs/02.jpg",goods:"联想(Lenovo)拯救者Y7000英特尔酷睿i5 15.6英寸游戏笔记本电脑( i5-8300H 8G 512G SSD GTX1050 黑)",info:"Y7000【1050 i5 512",nowPrice:5699,initPrice:6200,sold:0.5}
    ];
    let drag = document.createDocumentFragment();
    for(let i =0;i<data.length;i++){
        let good = new GoodsItem(data[i],drag);
    }
    document.body.appendChild(drag);
    document.addEventListener(GoodsItem.ADD_SHOPPING_CAR,addcarHandler)
    function addcarHandler(e) {
        // 添加商品
        let prop = e.data;
        // 如果商品id存在
        let item = shoppinglist.filter((i)=>{
            return i.id === prop.id;
        })
        // 找不到值返回空数组
        if(!item.length){
            let good = {
                selected:false,
                id:prop.id,
                icon:prop.icon,
                goods:prop.goods,
                info:prop.info,
                price:prop.nowPrice,
                num:1,
                sum:prop.nowPrice,
                delete:false
            }
            shoppinglist.push(good);
        }else{
            // 浅拷贝
            item[0].num++;
        }
        //  渲染商品购物车
    }
    let a = document.querySelector('button');
    a.addEventListener('click',clickEvent);
    function clickEvent(e) {
        let url = 'carpage.html?list='+encodeURI(JSON.stringify(shoppinglist));
        location.href = url;
    }
</script>
</body>
</html>

购物车表格：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车页面</title>
    <script src="stepNum.js"></script>
    <style>
        table td{
            /*display: inline-block;*/
        }
    </style>
</head>
<body>
<script>
    let url = location.search;
    let deUrl = decodeURI(url)
    let data =JSON.parse(deUrl.split('?')[1].split('=')[1]);
    let table;
    let tdWidth = [40,82,220,170,160,80,140,75];
    let inputs;
    init();
    function init() {
        clearTable(table);
        table = createTable(document.body,data);
        inputs = document.querySelectorAll('input[type="checkbox"]');
        document.addEventListener(StepNum.CHANGENUM,stepNumHandler);
    }

    function stepNumHandler(e) {
        // 在data中找到e.data,修改里面的num
        data.forEach((i)=>{
            if(i.id === e.data.id){
                i.num = e.data.num;
                i.sum = e.data.sum;
            }
        })
        clearTable(table);
        table = createTable(document.body,data);
    }
    function createTable(parent,data) {
        let table = document.createElement('table');
        Object.assign(table.style,{
            borderCollapse:'collapse',
            border:'1px solid #ddd',
            width:'990px'
        })
        createTableHead(table);
        createTableBody(table,data);
        parent.appendChild(table);
        return table;
    }
    function createTableBody(parent,data) {
        let fragment = document.createDocumentFragment();
        for(let i =0;i<data.length;i++){
            let tr = document.createElement('tr');
            Object.assign(tr.style,{
                verticalAlign: 'top',
                border: '1px solid #ddd',
                backgroundColor: 'antiquewhite',
                fontSize: '13px'
            })
            for(let prop in data[i]){
                if(prop === 'id')continue;
                let td = document.createElement('td');
                td.style.textAlign = 'center';
                td.style.padding = '20px 0';
                switch (prop) {
                    case 'selected':
                        let input = document.createElement('input');
                        input.type = 'checkbox';
                        input.checked = data[i][prop];
                        input.addEventListener('click',inputSelectHandler)
                        Object.assign(input.style,{
                            verticalAlign: 'baseline',
                            height: '10px',
                            marginRight: '20px',
                            marginLeft:'10px',
                            textAlign:'left',
                        })
                        td.appendChild(input);
                        td.style.width = '60px';
                        td.style.textAlign = 'left';
                        break;
                        case 'icon':
                            let img = new Image();
                            img.src = data[i][prop];
                            img.width = 100;
                            td.appendChild(img);
                            td.style.textAlign = 'left';
                            td.style.width = '200px';
                        break;
                        case 'num':
                            // parent,data
                            let stepNum = new StepNum(td,data[i]);
                            Object.assign(td.style,{
                                width: '80px',
                                textAlign: 'center'
                            })
                        break;
                        case 'sum':
                            td.style.width = '100px';
                        case 'price':
                            td.textContent ='￥'+data[i][prop].toFixed(2);
                            break;
                        case 'delete':
                            td.textContent = '删除';
                            td.style.padding='20px';
                            td.addEventListener('click',delHandler);
                            td.style.cursor = 'pointer';
                        break;
                        case 'goods':
                            data[i][prop]=data[i][prop].slice(0,36);
                            td.style.width = '200px';
                            td.textContent = data[i][prop];
                            td.style.textAlign = 'left';
                            break;
                        default:
                            td.textContent = data[i][prop];
                            break;
                }
                tr.appendChild(td);
            }
            fragment.appendChild(tr);
        }
        parent.appendChild(fragment);
    }
    function inputSelectHandler(e) {
        let flag = true;
        for(let i =1;i<inputs.length;i++){
            if(inputs[i].checked === false){
                flag = false;
                break;
            }
        }
        inputs[0].checked = flag;
    }
    function delHandler(e) {
        // 将data中对应的datalist 删除
        let trs = Array.from(table.children);
        let idx = trs.indexOf(this.parentNode);
        data = data.filter((i,index)=>{
            return index !== idx-1;
        })
        this.parentNode.remove();
    }
    function createTableHead(parent) {
        let thlist = ['全选','商品','单价','数量','小计','操作'];
        let tr = document.createElement('tr')
        for(let i =0;i<thlist.length;i++){
            let th = document.createElement('th');
            Object.assign(th.style,{
                textAlign:'center',
                padding:'10px 0',
                fontSize:'14px',
                fontWeight:'normal'
            })
            if(thlist[i]==='商品'){
                th.colSpan = 2;
                th.style.textAlign = 'left';
            }
            th.textContent = thlist[i];
            if(thlist[i]==='全选'){
                let selectAll = document.createElement('input');
                selectAll.addEventListener('click',selectAllHandler);
                selectAll.type = 'checkbox';
                Object.assign(selectAll.style,{
                    verticalAlign: 'baseline',
                    height: '10px',
                    marginRight: '20px',
                    marginLeft:'10px'
                })
                th.colSpan = 2;
                th.style.textAlign = 'left';
                th.insertBefore(selectAll,th.firstChild);
            }
            tr.appendChild(th);
        }
        parent.appendChild(tr);
    }
    function selectAllHandler(e) {
        // let inputs = document.querySelectorAll('input[type="checkbox"]');
        for(let i =1;i<inputs.length;i++){
            inputs[i].checked = this.checked;
        }
    }
    function clearTable(table) {
        if(table){
            table.remove();
        }
    }
</script>
</body>
</html>