收藏
PHPz批改状态：合格
老师批语：整体效果不错, 继续加油
<!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. 将内容填充到tbodytbdoy.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. 为每一个数量控件添加事件监听: inputnums.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;});}}
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
