使用Javascript写一个基础购物车，其中包含商品数量加加减减，下面的总价和总数量跟着商品数量变动，还可以自己添加需要的商品。
基础购物车的结构样式如下：
HTML代码：
<body> <table border="1px" cellpadding="20px" style="border-collapse: collapse;"> <thead> <tr> <th>商品名称</th> <th>商品价格</th> <th>商品数量</th> <th>商品操作</th> </tr> </thead> <tbody id="goods"> <tr> <td>风扇</td> <td>24.8￥</td> <td><button>-</button> 0 <button>+</button></td> <td><button>修改</button> <button>删除</button></td> </tr> </tbody> <footer id="total"> <tr> <td>总价</td> <td id="gross"></td> <td>总数量</td> <td id="qty"></td> </tr> </footer> </table> <button class="addition">添加</button> <br /> <!-- 点击添加显示 --> <div class="inp" style="display: none;"> <input class="des" type="text" placeholder="请输入商品名称" /> <input class="cost" type="number" placeholder="请输入商品价格" /> <input class="mag" type="number" placeholder="请输入商品数量" /> <br /> <button class="append">添加</button> <button class="cancel">取消</button> </div> <!-- 点击修改显示 --> <div class="amend" style="display: none;"> <input class="dess" type="text" placeholder="请输入商品名称" /> <input class="costs" type="number" placeholder="请输入商品价格" /> <input class="mags" type="number" placeholder="请输入商品数量" /> <br /> <button onclick="appends()">确定</button> <button onclick="cancels()">取消</button> </div> <script src="js/basics.js"></script> </body>
css代码：
<style> tr, td { text-align: center; } </style>
js代码：
// let声明一个变量 为data let data; // 声明一个最大的id let maxid; // 声明一个变量 为内容下标的id let a; // 创建 XMLHttpRequest 对象 let xhr = new XMLHttpRequest(); // 使用 open 方法指定要请求的地址、类型和方式 xhr.open('get', 'js/basics.json', true); // 发送数据 xhr.send(); // 绑定 onreadystatechange 事件，判断 readyState 和 status 的状态 xhr.onreadystatechange = function() { // 第一个判断到哪一步，交互流程，有 5 个阶段 从0开始 4表示交互流程完毕 200是状态请求成功 if (xhr.readyState == 4 && xhr.status == 200) { let text = xhr.responseText; console.log(text); // 将JSON中的数据转化为对象 接收服务器数据 一般为字符串 data = JSON.parse(text); console.log(data); // 调用函数 basic(data); // for循环遍历数组 for (let i = 0; i < data.length; i++) { // 判断 当最大的id大于商品最大的id时 最大的id=商品的id if (maxid > data[i].id) { maxid = data[i].id } } } }; // 封装函数 function basic(d) { let str = ''; // let 声明一个变量 total为总价 总价从零开始 let total = 0; // let 声明一个变量 amount为总数量 总数量从零开始 let amount = 0; // let声明变量为gross 通过id名在文档中找到gross let gross = document.getElementById('gross'); // let声明变量为qty 通过id名在文档中找到qty let qty = document.getElementById('qty'); for (let i = 0; i < data.length; i++) { // +=是先算在等于 // 总价等于元素的数量*所对应的价格相加 total += data[i].num * data[i].price; // 总数量等于所有数据的数量 并转为整数 amount += parseInt(data[i].num); // str拼接 str += `<tr> <td>${data[i].name}</td> <td>${data[i].price}</td> <td><button onclick="minus(${i})">-</button> ${data[i].num} <button onclick="add(${i})">+</button></td> <td><button onclick="alter(${i})">修改</button> <button onclick="del(${i})">删除</button></td> </tr>`; } // 元素.innerHTML=内容 改变总价的内容 gross.innerHTML = total; // 元素.innerHTML=内容 改变总数量的内容 qty.innerHTML = amount; // 渲染数据 document.getElementById('goods').innerHTML = str; }; // 数量按钮减1 // 减号事件绑定点击事件 传参 function minus(i) { // 当商品数量大于0时 if (data[i].num > 0) { // 商品数量减一 data[i].num--; } else { // 否则弹窗提示不能为空 alert("商品数量不能为负") }; // 调用函数 basic(data); }; // 数量加1 function add(i) { data[i].num++; // 调用函数 basic(data); }; // 商品删除 // 点击删除按钮 传参 function del(i) { data.splice(i, 1) // 调用函数 basic(data); }; // 获取添加按钮 let addition = document.getElementsByClassName('addition')[0]; console.log('addition'); // 获取下面的输入框 let inp = document.getElementsByClassName('inp')[0]; console.log('inp'); // 给添加按钮绑定点击事件 addition.onclick = function() { // 当点击添加按钮时，下面的输入框出现 inp.style = "display:block" }; // 点击取消按钮输入框隐藏 // 获取取消按钮 let cancel = document.getElementsByClassName('cancel')[0]; console.log('cancel'); // 给取消按钮绑定点击事件 cancel.onclick = function() { // 点击取消按钮 下面的三个输入框隐藏并清空 inp.style = "display:none"; des.value = null; cost.value = null; mag.value = null; }; // 添加事件 // 获取向上添加的添加按钮 let append = document.getElementsByClassName('append')[0]; console.log('append'); // 获取三个输入框 let des = document.getElementsByClassName('des')[0]; console.log('des'); let cost = document.getElementsByClassName('cost')[0]; console.log('cost'); let mag = document.getElementsByClassName('mag')[0]; console.log('mag'); // 给添加绑定点击事件 append.onclick = function() { console.log(data); // 判断内容都不为空且价格大于零 数量大于等于零 并且数量为整数 if (des.value != '' && cost.value != '' && mag.value != '' && cost.value > 0 && mag.value >= 0 && mag.value % 1 === 0) { // 通过数组尾部添加添加新的内容 data.push({ "id": ++maxid, "name": des.value, "price": parseFloat(cost.value), "num": parseInt(mag.value) }) // 添加上以后下面的输入框隐藏并清空 inp.style = "display:none"; des.value = ''; cost.value = ''; mag.value = ''; console.log(data); basic(data); } else { alert("信息填写完整") }; }; // 修改事件 // 获取修改隐藏的输入框 // 给修改按钮添加点击事件 let amend = document.getElementsByClassName('amend')[0]; // 获取三个输入框 let dess = document.getElementsByClassName('dess')[0]; console.log('dess'); let costs = document.getElementsByClassName('costs')[0]; console.log('costs'); let mags = document.getElementsByClassName('mags')[0]; console.log('mags'); // 给添加绑定点击事件 点击添加出现编辑弹窗 function alter(index) { console.log(index); amend.style.display = "block"; // 数据回显 dess.value = data[index].name; costs.value = data[index].price; mags.value = data[index].num; // a等于数据下标的id a = data[index].id; }; // 编辑添加 // 点击下面输入框里的添加 function appends() { // 判断三个输入框任意一个为空或价格小于0或数量小于0时 提示信息有误 if (dess.value == '' || costs.value == '' || mags.value == '' || costs.value < 0 || mags.value < 0) { alert("信息有误"); // 否则for循环遍历数组 } else { for (let i = 0; i < data.length; i++) { // if判断用户输入的id等于内容的id时 内容修改 if (data[i].id == a) { data[i].name = dess.value; data[i].price = costs.value; data[i].num = mags.value; // 修改完成 输入框隐藏 调用渲染函数 alert("确认修改"); amend.style.display = "none"; basic(data); return; } } // 否则提示没有找到相应的数据 输入框隐藏 amend.style.display = 'none'; }; }; // 编辑取消 function cancels() { // 点击取消，编辑的输入框隐藏，数据重新渲染 amend.style = "display:none"; basic(data); };
json假数据：
[{ "id":1, "name":"风扇", "price":"24.8", "num":0 },{ "id":2, "name":"南街村拌面", "price":"5", "num":0 },{ "id":3, "name":"甜美风小裙子", "price":"99.8", "num":0 },{ "id":4, "name":"空调", "price":"1688", "num":0 },{ "id":5, "name":"维达纸巾", "price":"2.5", "num":0 },{ "id":6, "name":"衬衣", "price":"50", "num":0 }]
