收藏
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: lightcyan;}table tfoot {background-color: lightcyan;}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="checkall" 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 tbody = table.createTBody();// 2. 创建tbody的内容,商品列表items.forEach(function (item, key) {// 1. 创建商品模板字符串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. 将内容填充到tbodytbody.insertAdjacentHTML('beforeend', tr);// tbody.innerHTML = 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. 拿到所有的数量控件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;table.querySelectorAll('.money')[key].textContent = cart.money[key];table.querySelector('.total-money').textContent = cart.totalMoney;};});//全选全不选功能// 选择标签let checkall = document.querySelector('.checkall')// console.log(checkall)let check = document.querySelectorAll('.check')// console.log(check)// 绑定事件checkall.onclick = function(){for(let i = 0; i < check.length; i++){check[i].checked = checkall.checked}}for(let i = 0; i < check.length; i++){check[i].onclick = function(){//只要有个选择框没有被选中，则全选框取消checkedfor(let j = 0; j < check.length; j++){if(check[j].checked == false){checkall.checked = false;return;}else {checkall.checked == true;}}}}</script></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
