购物车全选/全不选功能和库存管理功能实例演示
1.输出结果
2.代码部分
<!DOCTYPE html><htmllang=“zh-CN”><head><metacharset=“UTF-8”><metahttp-equiv=“X-UA-Compatible”content=“IE=edge”><metaname=“viewport”content=“width=device-width, initial-scale=1.0”><title>购物车全选</title><style>.cart { width:460px; display: grid; gap:10px;} table { border–collap搭建项目系统点我wcqh.cnse: collapse; text–align: center;} table caption { font–size:20px; margin–bottom:10px;} table input[type=number]{ width:40px;} table th, table td { border–bottom: thin solid #888; padding:5px;} table thead { border–top: thin solid #888; background–color: lightcoral;} table tfoot { background–color: lightcoral;} table tbody tr:搭建项目系统点我wcqh.cnnth–child(odd):hover { background–color:#eee; cursor: pointer;} table tr td:first–child { padding–left:20px;} table tr td:last–child { padding–right:20px;}.cart .pay { display: grid; grid:1fr/auto–flow; place–content:end; gap:10px;}</style></head><body><divclass=“cart”><table><caption> 我的购物车</caption><thead><tr><!– 搭建项目系统点我wcqh.cn全选按钮 –><td><inputtype=“checkbox”name=“”class=“check-all”checked/></td><td>编号</td><td>品名</td><td>单位</td><td>单价</td><td>数量</td><td>金额(元)</td></tr></thead></table></div><scripttype=“module”>// (一) 商品信息const items =[{ id:286, name:酸奶, units:箱, price:50, num:1},{ id:870, name:苹果, units:千克, price:10, num:1},{ id:633,搭建项目系统点我wcqh.cn name:外套, units:件, price:300, num:1},{ id:153, name:皮鞋, units:双, price:400, num:1},{ id:109, name:手机, units:台, price:5000, num:1},];// (二) 导入购物车模块importCart from ./modules/cart.js;// (三) 实例化购物车类const cart =newCart(items);// console.log(cart.total);// console.log(cart.money);// console.log(cart.totalMoney);// (四) 获取购物搭建项目系统点我wcqh.cn车(表格)const table = document.querySelector(table);// (五) 将商品渲染到购物车元素中 tbody// 1.创建 tbody: 商品容器const tbdoy = table.createTBody();// 2. 创建tbody的内容,商品列表// 把item里面的所有的商品遍历一遍，除了item还需要用其他值，根据键获取 items.forEach(function(item, key){// 1. 创建商品模板字符串// 插入tobdy的每个商品const tr =`<tr><td><input type=“checkbox” name=“”class=“ch搭建项目系统点我wcqh.cneck” checked /></td><td>${item.id}</td><td>${item.name}</td><td>${item.units}</td><td>${item.price}</td><td><input type=“number” name=“” value=“${item.num}”</td><td class=“money”>${cart.money[key]}</td></tr>`;// 2. 将内容填充到tbody tbdoy.insertAdjacentHTML(beforeend, tr);});// (六) 将相关统计数据(总数量,总金额),填充到tfoot中cons搭建项目系统点我wcqh.cnt tfoot = table.createTFoot();// 创建tfoot内容 let tr =`<tr><td colspan=“5”>总计:</td><td class=“total”>${cart.total}</td><td class=“total-money”>${cart.totalMoney}</td></tr>`; tfoot.insertAdjacentHTML(beforeend, tr);// (七) 更新数量,实时计算出结果并显示出来// 1. 拿到所有的数量控件// input[type=number] 数量控件通过标签加属性选择器来拿，然后放到一个变量里面保存’constnu搭建项目系统点我wcqh.cnms= table.querySelectorAll(input[type=number]);// 2. 为每一个数量控件添加事件监听: input nums.forEach(function(num, key){ num.oninput =function(){// 1. 计算总数量 // 是个字符串，需要转成数值类型，要不然没法相加// 对应的商品找到，对数量更新 items[key].num = num.value *1; cart.total = cart.getTotal(items);// 2. 计算每个商品金额 cart.money[key]= num.value *1* items[key].price;// 搭建项目系统点我wcqh.cn3. 计算每个商品金额 cart.totalMoney = cart.money.reduce(function(acc, cur){return acc + cur;});// 4.将数据渲染到指定元素上 table.querySelector(.total).textContent = cart.total;// 加key知道的更新的哪一个 ，数组多个值 table.querySelectorAll(.money)[key].textContent = cart.money[key]; table.querySelector(.total-money).textContent = cart.totalMoney;};})搭建项目系统点我wcqh.cn;</script></body></html> // 默认导出购物车模块exportdefaultclass{// 构造器 constructor(items){// 1. 商品总数量 // 用属性的方法写this.total =this.getTotal(items);// 2. 每个商品金额(数组)this.money =this.getMoney(items);// 3. 商品总金额this.totalMoney =this.getTotalMoney();}// (一) 计算商品总数量 getTotal(items){// 1. 数量数组: 每个商品的数量num字段组成的数组// map有返回值，搭建项目系统点我wcqh.cnforezch没返回值 let numArr = items.map(function(item){return item.num;});// 2. 计算总数量// arr累加器，cur当前值 然后returm出去之后前台就有值了// 遍历数组return numArr.reduce(function(acc, cur){return acc + cur;});}// (二) 计算每个商品的金额 getMoney(items){// 金额 = 数量 * 单价return items.map(function(item){return item.num * item.price;});}// (三) 计算商品总金额getT搭建项目系统点我wcqh.cnotalMoney(){returnthis.money.reduce(function(acc, cur){return acc + cur;});}}
© 版权声明
1.如需技术支持联系QQ：1339833655
2. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
3. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
4. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
5. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
6. 如有链接无法下载、失效或广告，请联系管理员处理！
7. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
8. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员！
THE END
会员专属
暂无评论内容