基于dom来制作使用json数据类型的简易购物车

实现的网页样式

使用的JSON

var json = [
    //  两个店铺
    {
        "shopname": "京东自营",
        "shopID": 101,
        // 商品
        "goods": [
            {
                "checked": false,
                "goodName": "USB转换器",
                "goodID": 1001,
                "price": 158,
                "num": 1
            }, {
                "checked": false,
                "goodName": "USB转换器",
                "goodID": 1002,
                "price": 158,
                "num": 1
            }
        ]
    },
    {
        "shopname": "京东非自营",
        "shopID": 102,
        // 商品
        "goods": [
            {
                "checked": false,
                "goodName": "ipone7s",
                "goodID": 1003,
                "price": 9999,
                "num": 4
            }, {
                "checked": false,
                "goodName": "sumsung note 7",
                "goodID": 1004,
                "price": 5288,
                "num": 10
            }
        ]
    },
    {
        "shopname": "某某旗舰店",
        "shopID": 103,
        // 商品
        "goods": [
            {
                "goodID": 1007,
                "checked": false,
                "goodName": "USB转换器",
                "price": 158,
                "num": 1
            }, {
                "checked": false,
                "goodName": "USB转换器",
                "goodID": 1005,
                "price": 158,
                "num": 1
            },
            {
                "checked": false,
                "goodName": "ipad",
                "goodID": 1006,
                "price": 5.22,
                "num": 5
            }
        ]
    }
];

以下为实现代码

function ttus() {        //一开始在body中的onload调用，实现页面的初始化和页面刷新
    let obody=document.getElementById("commodity");    //购物车打印的位置
    for (i in json ){                //遍历一遍json
        let frame=document.createElement("div");
        let headline=document.createElement("p");
        let oul=document.createElement("ul");
        frame.classList.add("frame");    //给一个实现变成的css样式
        headline.innerText=json[i].shopname;       //将shopname赋值给headline
        frame.appendChild(headline);
        frame.appendChild(oul);
        for (j in json[i].goods){   //将json中的三个数组打印成页面样式
            let oli=document.createElement("li");
            oli.innerHTML=`oCcheck(this,${json[i].goods[j].goodID})" type="checkbox">` +
                ''+json[i].goods[j].goodName+" "+json[i].goods[j].price+'' +
                `minus(this,${json[i].goods[j].goodID})" value="-">` +
                'i].goods[j].num+'">' +
                `plus(this,${json[i].goods[j].goodID})" value="+">` +
                ''+json[i].goods[j].num*json[i].goods[j].price+'';
            oul.appendChild(oli);
        }
        obody.insertBefore(frame,obody.childNodes[i]);
    }
}
function plus(that,num) {           //实现购物车的加功能
    for (i in json){
        for (j in json[i].goods){
            if (json[i].goods[j].goodID==num) {
                that.parentNode.childNodes[3].value++;
                json[i].goods[j].num=that.parentNode.childNodes[3].value;
                that.parentNode.childNodes[5].innerText=json[i].goods[j].num*json[i].goods[j].price;
                totalPrice()    //计算购物车的合计额度
            }
        }
    }
}
function minus(that,num) {     //实现购物车的减功能
    for (i in json){
        for (j in json[i].goods){
            if (json[i].goods[j].goodID==num) {
                if (that.parentNode.childNodes[3].value==0){
                    that.parentNode.childNodes[3].value=0;
                }else {
                    that.parentNode.childNodes[3].value--;
                }

                json[i].goods[j].num=that.parentNode.childNodes[3].value;
                that.parentNode.childNodes[5].innerText=json[i].goods[j].num*json[i].goods[j].price;
                totalPrice()    //计算购物车的合计额度
            }
        }
    }
}
function oCcheck(that,num) {         //实现购物车商品前框的选中功能
    for (i in json){
        for (j in json[i].goods){
            if (json[i].goods[j].goodID==num) {
                if (that.checked){
                    json[i].goods[j].checked=true;
                    totalPrice();
                } else {
                    json[i].goods[j].checked=false;
                    totalPrice();
                }
            }
        }
    }
}
function totalPrice() {       //计算购物车的合计额度
    let ototal=document.getElementById("total");
    let price=0;
    for (i in json){
        for (j in json[i].goods){
            if (json[i].goods[j].checked==true){
                price+=json[i].goods[j].num*json[i].goods[j].price;
            }
        }
    }
    ototal.innerText="总价为："+price;
}
console.log(json);
document.getElementById("delete").οnclick=function () {        //实现删除的功能
    for (let i=0;i;i++){
        for (let j=0;jgoods.length;j++){
            if (json[i].goods[j].checked){
                json[i].goods.splice(j,1);
                j--;
            }
        }
        if (json[i].goods.length==0){
                json.splice(i,1);
                i--;
        }
    }
    document.getElementById("commodity").innerText="";
    document.getElementById("total").innerText="总价为：0";
    ttus();
}