使用json数据类型的简易购物车实现(基于dom制作)
程序员文章站
2022-08-06 09:11:54
实现的网页样式
使用的JSON
var json = [
// 两个店铺
{
"shopname": &qu...
实现的网页样式
使用的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(); }