今天是基础购物车功能的讲解。所具备的功能商品展示以表格形式展示商品的名称、价格、数量和操作选项。商品添加用户点击 “添加” 按钮输入商品名称、价格和数量可以将新商品添加到购物车中。商品编辑可以对已经存在的商品进行编辑修改商品的名称、价格和数量。商品删除用户可以删除不需要的商品。总价和总数量计算实时计算购物车中商品的总价和总数量并在页面上显示。我们的商品数据都是在json文件中保存的所以我们要首先准备一个json文件也就是肯定会用到ajax获取数据。HTML 结构table cellspacing0theadtrth商品名称/thth商品价格单位为元/thth商品数量/thth操作/th/tr/theadtbody/tbodytfoottrth总价/thtd classtotal_price0/tdth总数量/thtd classtotal_num0/td/tr/tfoot/tablebutton onclickdisplay()添加/buttondiv classadd_box stylewidth: 40%;input typetext classadd_name placeholder请输入商品名称/input typetext classadd_price placeholder请输入商品价格/input typetext classadd_num placeholder请输入商品数量button classadd_ensure onclickensure(1)确定/buttonbutton classadd_cancel onclickcancel()取消/button/divdiv classredact_box stylewidth: 40%;input typetext classedit_name placeholder请输入商品名称/input typetext classedut_price placeholder请输入商品价格/input typetext classedit_num placeholder请输入商品数量button classedit_ensure onclickensure(2)确定/buttonbutton classedit_cancel onclickcancels()取消/button/divscript srcjs/shopingCar.js/scriptAI写代码html这段 HTML 代码构建了购物车的基本结构包括一个表格用于展示商品信息两个隐藏的输入框组分别用于添加和编辑商品以及相应的按钮用于触发操作。CSS 样式*{margin: 0;padding: 0;}body{padding-top: 10px;padding-left: 10px;}table{width: 40%;height: 100px;text-align: center;/* border: 1px solid black; */}thead{width: 40%;}th {padding: 8px 10px 8px 10px;border: 1px solid black;}td {padding: 8px 10px 8px 10px;border: 1px solid black;}button{padding: 2px 6px 2px 6px;}input{margin-top: 5px;margin-bottom: 10px;}.add_box{display: none;}.redact_box{display: none;}AI写代码cssCSS 样式主要用于设置页面的布局和元素的外观包括表格的边框、内边距按钮和输入框的样式以及添加和编辑框组的初始隐藏状态。JavaScriptlet body document.getElementsByTagName(tbody)[0];let data;let total_price document.getElementsByClassName(total_price)[0];let total_num document.getElementsByClassName(total_num)[0];let maxId 0;let total;let count;let xhr new XMLHttpRequest();xhr.open(get, js/shop.json, true);xhr.send();xhr.onreadystatechange function() {if (xhr.readyState 4 xhr.status 200) {let text xhr.responseText;console.log(text);data JSON.parse(text);console.log(data);for (let i 0; i data.length; i) {if (data[i].id maxId) {maxId data[i].id;}}reader();}};// 渲染函数function reader() {count 0;total 0;console.log(data);let str ;for (let i 0; i data.length; i) {str trtd${data[i].name}/tdtd${data[i].price}/tdtdbutton onclicksaveData(${i}, ${2})-/button${data[i].num}button onclicksaveData(${i}, ${1})/button/tdtdbutton onclickdisplay(${i})编辑/buttonbutton onclicksaveData(${i}, ${3})删除/button/td/tr;count data[i].num * 1;total data[i].price * data[i].num;}body.innerHTML str;// 将价格和数量分别输出到页面将价格保留至最多两位小数total_price.innerHTML count.toFixed(2);total_num.innerHTML total * 1;}/** 加减删除* params int index 下标* params int type 操作类型 1 加 2减 3删除*/function saveData(index, type) {if (type 1) {data[index].num;} else if (type 2) {if (data[index].num 0) {data[index].num--;}} else if (type 3) {data.splice(index, 1);}reader();}// 添加函数let names document.getElementsByClassName(add_name)[0];let prices document.getElementsByClassName(add_price)[0];let numbers document.getElementsByClassName(add_num)[0];// 编辑let edit_name document.getElementsByClassName(edit_name)[0];let edut_price document.getElementsByClassName(edut_price)[0];let edit_num document.getElementsByClassName(edit_num)[0];// 显示function display(index) {if (index undefined) {names.value ;prices.value ;numbers.value ;document.getElementsByClassName(add_box)[0].style.display block;} else {// 点击编辑按钮后// 将对应行的名称、价格以及总数量渲染到输入框里edit_name.value data[index].name;edut_price.value data[index].price;console.log(edit_name);edit_num.value data[index].num;// 存储一个值放idsessionStorage.setItem(ID, data[index].id);// 最后显示编辑的输入框document.getElementsByClassName(redact_box)[0].style.display block;}}// 确定按钮函数/***/function ensure(status) {if (status 1) {let shopName names.value;let shopPrice prices.value;let shopNumber numbers.value;// 判断价格是否小于0或者为空或名字为空或数量小于0或为空或大于0不是整数if (Number(shopPrice) 0) {alert(是负数);} else if (shopName ) {alert(商品名不能为空);} else if (shopPrice ) {alert(商品价格不能为空);} else if (shopNumber ) {alert(商品数量不能为空);} else if (Number(shopNumber) 0) {alert(商品数量不能小于零);} else if (shopNumber % 1 ! 0) {alert(商品数量要为整数);} else {console.log(哈哈);// 当不满足以上条件时maxId;data.push({name: shopName,id: maxId,price: shopPrice,num: shopNumber});// 点击确定后隐藏输入框document.getElementsByClassName(add_box)[0].style.display none;}} else if (status 2) {// 点击确定后// 获取到输入框里各自的value值let shopNames edit_name.value;let shopPrices edut_price.value;let shopNumbers edit_num.value;// 判断条件是否合格像添加一样if (parseInt(shopPrices) 0 || shopNames || Number(shopNumbers) 0 || shopNumbers 0 shopNumbers % 1 ! 0) {alert(不符合添加条件哦);} else {// 当符合条件后// for循环循环datafor (let i 0; i data.length; i) {// 判断下标的id等不等于存储的idif (data[i].id sessionStorage.getItem(ID)) {// 当相等时将1输入框里的值渲染到对应行data[i].name shopNames;data[i].price shopPrices;data[i].num shopNumbers * 1;break;// 结束循环}}// 隐藏输入框document.getElementsByClassName(redact_box)[0].style.display none;}}// 渲染到页面reader();}// 取消函数function cancels(status) {if (status 1) {document.getElementsByClassName(add_box)[0].style.display none;} else if (status 2) {document.getElementsByClassName(redact_box)[0].style.display none;}}AI写代码javascript运行代码解释数据从 js/shop.json 文件中获取商品数据并转化为 JavaScript 对象。同时找出最大的商品 ID以便后续添加新商品时生成唯一的 ID而不会与之前的商品重复。渲染函数 reader遍历商品数据生成表格行的 HTML 字符串并将其插入到表格的 tbody 中。同时计算商品的总价和总数量渲染到页面上。每次数据更新后都要重新渲染。操作函数 saveData根据传入的 index 和 type 参数对商品的数量进行加减操作或删除商品。操作完成后调用 reader 函数重新渲染页面。显示函数 display根据是否传入 index 参数决定显示添加商品的输入框还是编辑商品的输入框并将对应商品的信息填充到输入框中。确定按钮函数 ensure根据 status 参数判断是添加商品还是编辑商品对输入的信息进行验证若验证通过则更新商品数据并重新渲染页面。取消函数 cancels根据 status 参数隐藏添加或编辑商品的输入框。————————————————版权声明本文为CSDN博主「好青崧」的原创文章遵循CC 4.0 BY-SA版权协议转载请附上原文出处链接及本声明。原文链接https://blog.csdn.net/jht_520/article/details/147160692