1.输出结果
2.代码部分
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>购物车全选</title> <style> .cart { width: 460px; display: grid; gap: 10px; } table { border-collapse: 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:nth-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> <div class="cart"> <table> <caption> 我的购物车 </caption> <thead> <tr> <!-- 全选按钮 --> <td><input type="checkbox" name="" class="check-all" checked /></td> <td>编号</td> <td>品名</td> <td>单位</td> <td>单价</td> <td>数量</td> <td>金额(元)</td> </tr> </thead> </table> </div> <script type="module"> // (一) 商品信息 const items = [ { id: 286, name: '酸奶', units: '箱', price: 50, num: 1 }, { id: 870, name: '苹果', units: '千克', price: 10, num: 1 }, { id: 633, name: '外套', units: '件', price: 300, num: 1 }, { id: 153, name: '皮鞋', units: '双', price: 400, num: 1 }, { id: 109, name: '手机', units: '台', price: 5000, num: 1 }, ]; // (二) 导入购物车模块 import Cart from './modules/cart.js'; // (三) 实例化购物车类 const cart = new Cart(items); // console.log(cart.total); // console.log(cart.money); // console.log(cart.totalMoney); // (四) 获取购物车(表格) 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="check" 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中 const 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] 数量控件通过标签加属性选择器来拿，然后放到一个变量里面保存’ const nums = 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; // 3. 计算每个商品金额 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; }; }); </script></body></html>
// 默认导出购物车模块export default class { // 构造器 constructor(items) { // 1. 商品总数量 // 用属性的方法写 this.total = this.getTotal(items); // 2. 每个商品金额(数组) this.money = this.getMoney(items); // 3. 商品总金额 this.totalMoney = this.getTotalMoney(); } // (一) 计算商品总数量 getTotal(items) { // 1. 数量数组: 每个商品的数量num字段组成的数组 // map有返回值，forezch没返回值 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; }); } // (三) 计算商品总金额 getTotalMoney() { return this.money.reduce(function (acc, cur) { return acc + cur; }); }}
