这不是标准的，只是将购物车所可能用到的功能给总和一下，我用表格的方式把功能写了出来
css部分，只需要写出装有商品的表格的样式就行：
/* 表格样式 */ table { width: 400px; height: 100px; border: 1px #525252 solid; } th, td { border: 1px #525252 solid; text-align: center; } /* 添加商品输入框 */ #nunu { display: none; } #jian { display: none; }
接下来是HTML，只要把表头写好：
<!-- 表头表示商品信息 --> <table cellspacing="0"> <thead> <tr> <th>名称</th> <th>价格</th> <th>数量</th> <th>操作</th> </tr> </thead> <!-- 商品内容信息 --> <tbody></tbody> <!-- 商品价格数量总和信息 --> <tfoot></tfoot> </table> <!-- 添加商品按钮 --> <button onclick="but()">添加商品</button> <!-- 添加商品所需要填写的信息 --> <div id="nunu"> <input type="text" id="shopName" placeholder="商品名称"> <input type="text" id="shopPrice" placeholder="商品价格"> <input type="text" id="shopNum" placeholder="商品数量"> <button onclick="queren()">确认</button> <button onclick="quxiao()">取消</button> </div>
租
重要的是JS的功能：
let n = -1 let zong = document.getElementById("zonghe") let jia = document.getElementById("zongjia") // 获取到两个标签,方便使用 let tbody = document.getElementsByTagName("tbody")[0] let tfoot = document.getElementsByTagName("tfoot")[0] // 商品输入框 let shopName = document.getElementById("shopName") let shopPrice = document.getElementById("shopPrice") let shopNum = document.getElementById("shopNum") // 整一份假数据,修改添加时可以拿来用 let shuzu = [{ "name": "商品一", "price": 120, "num": 0, "display": "display:none" }, { "name": "商品二", "price": 100, "num": 0, "display": "display:none" }, { "name": "商品三", "price": 50, "num": 0, "display": "display:none" }] // 设置全局ab是为了方便不同地方使用 // 用来计算商品总价和商品数量 let a let b // 表格商品内容的封装函数 function renders() { let str = "" a = 0 b = 0 for (let i = 0; i < shuzu.length; i++) { a += shuzu[i].price * shuzu[i].num b += shuzu[i].num if (shuzu[i].num <= 0) { shuzu[i].display = "display:none" } else { shuzu[i].display = "display:inline-block" } // 以字符串的方法把相对应的数据从假数据中拿出来 str += `<tr> <td>${shuzu[i].name}</td> <td>${shuzu[i].price}</td> <td><button onclick="minus(${i})" style="${shuzu[i].display}">-</button> <span>${shuzu[i].num}</span> <button onclick="add(${i})">＋</button> </td> <td> <button onclick="butt(${i})">编辑</button> <button onclick="shanchu(${i})">删除</button> </td> </tr>` } // 把他渲染到tbody标签中，此标签中用来存放修改添加的商品 tbody.innerHTML = str } // 商品总价和数量的封装函数 function render() { let str = "" // 使用字符串的方法把a和b渲染出来(a和b是全局的，所以改变了只需要再次调用) str += `<tr> <th></th> <th>总价：${a}</th> <th>总和：${b}</th> <th></th> </tr>` // 把他渲染到tfoot标签中，此标签中用来显示商品价格和数量的分别总和 tfoot.innerHTML = str } // 在函数外部进行调用,因为商品信息和商品数量是触发事件之前就要存在的，别的地方发生改变再次调用即可 renders() render() // 点击+按钮添加商品数量 // 需要传下标,来确定你所点击的是哪个商品 function add(i) { shuzu[i].num++ renders() render() } // 点击-按钮减少商品数量 // 需要传下标,来确定你所点击的是哪个商品 function minus(i) { shuzu[i].num-- renders() render() } // 点击删除按钮 // 需要传下标,来确定你所点击的是哪个商品 function shanchu(i){ shuzu.splice(i,1) renders() render() } // 点击取消按钮，使田家庵商品输入框隐藏并且值为空 function quxiao() { shopName.value = "" shopPrice.value = "" shopNum.value = "" nunu.style.display = "none" } // 点击添加按钮,添加输入框显示出来 function but() { nunu.style.display = "block" } // 点击编辑按钮,让输入框显示出来,并让三个输入框显示此时点击的值 // 传下标是为了确定你所要编辑的是哪个商品 function butt(i) { nunu.style.display = "block" shopPrice.value = shuzu[i].price shopName.value = shuzu[i].name shopNum.value = shuzu[i].num n = i } // 封装函数,判断填写的三个输入框是否填写完整 function queren_gai() { if (shopName.value == "" || shopPrice.value == "" || shopNum.value == "") { alert("请填写完整") } else { shuzu[n].name = shopName.value; // 因为是价格和数量可以不是小数，所以就parsefloat来取整 shuzu[n].price = parseFloat(shopPrice.value); shuzu[n].num = parseFloat(shopNum.value); } } // 设置一个空数组，用来装需要添加的商品的数据 let bian = [] // 判断是否输入框填写完整 function queren_jia() { if (shopName.value == "" || shopPrice.value == "" || shopNum.value == "") { alert("请填写完整") } else { // 把所填写的数据放在空数组中 bian = { "name": shopName.value, "price": parseFloat(shopPrice.value), "num": parseFloat(shopNum.value), "display": "display:none" } // 最后把这个含有数据的数组push到你的假数据中 shuzu.push(bian); } } // 点击确认按钮进行判断是要将信息返回为编辑还是为添加,添加需要新开的信息,编辑需要回显不用新开一行 function queren() { if (n == -1) { queren_jia() } else { queren_gai() } // 不管还是添加,信息都发生了改动,所以最后需要进行调用,让信息变为最新的数据 renders(); render(); }
注释已经给的很详细了，如有看不懂的地方可以私信问我
最终图：
