欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用json数据类型的简易购物车实现(基于dom制作)

程序员文章站 2022-08-06 09:11:54
实现的网页样式 使用的JSON var json = [ // 两个店铺 { "shopname": &qu...

实现的网页样式

使用json数据类型的简易购物车实现(基于dom制作)

使用的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("p");
        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=`` +
                ''+json[i].goods[j].goodName+" "+json[i].goods[j].price+'' +
                `` +
                '' +
                `` +
                ''+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").onclick=function () {        //实现删除的功能
    for (let i=0;ifor (let j=0;jif (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();
}