![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
PHPzCorrection status：qualified
Teacher's comments：
Collection
Collection
<!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>.box {width: 22em;height: 2em;}.list>li {height: 1.6em;background-color: #efefef;display: grid;grid-template-columns: repeat(5, 3em);gap: 1em;place-items: center right;border-bottom: 1px solid #ccc;}.list>li:first-of-type {background-color: lightseagreen;color: white;}.list>li:hover:not(:first-of-type) {cursor: pointer;background-color: lightcyan;}.list>li input[type='number'] {width: 3em;border: none;outline: none;text-align: center;font-size: 1em;background-color: transparent;}.list>li:last-of-type span.total-num,.list>li:last-of-type span.total-amount {grid-column: span 2;place-self: center right;color: lightseagreen;}.account {float: right;background-color: lightseagreen;color: white;border: none;outline: none;width: 4.5em;height: 1.8em;}.account:hover {background-color: coral;cursor: pointer;}</style></head><body><div class="box"><div class="selectAll"><!-- checkAll(): 当全选按钮的状态发生变化化,触发该事件 change --><input type="checkbox" class="check-all" name="check-all" onchange="checkAll()" checked /><label for="check-all">全选</label></div><ul class="list"><li><span>选择</span><span>品名</span><span>数量</span><span>单价</span><span>金额</span></li><li><input type="checkbox" onchange="checkItems()" checked /><span class="content">手机</span><input type="number" value="1" min="1" class="num" /><span class="price">100</span><span class="amount">0</span></li><li><input type="checkbox" onchange="checkItems()" checked /><span class="content">电脑</span><input type="number" value="2" min="1" class="num" /><span class="price">200</span><span class="amount">0</span></li><li><input type="checkbox" onchange="checkItems()" checked /><span class="content">相机</span><input type="number" value="3" min="1" class="num" /><span class="price">300</span><span class="amount">0</span></li><li><input type="checkbox" onchange="checkItems()" checked /><span class="content">游戏机</span><input type="number" value="2" min="1" class="num" /><span class="price">3000</span><span class="amount">0</span></li><li><span>总计:</span><span class="total-num">0</span><span class="total-amount">0</span></li></ul><button class="account">结算</button></div><script>var items = document.querySelectorAll('.list li input[type="checkbox"]');// 1. 全选function checkAll() {// 1. 全选按钮状态let status = event.target.checked;// console.log(status);// 2. 根据状态动态设置所有商品的状态items.forEach(item => (item.checked = status));autoCalculate();// document// .querySelectorAll('.list li input[type="checkbox"]')// .forEach(item => (item.checked = event.target.checked));}// 2. 根据用户选择来动态设置全选状态function checkItems() {// 1. 拿到全部商品// let items = document.querySelectorAll('.list li input[type="checkbox"]');// 2. 判断状态,只有全部被选择,才需要设置全选为true, array.everylet status = [...items].every(item => item.checked === true);// console.log(status);// 3. 将这个新状态设置到全选按钮document.querySelector('.check-all').checked = status;autoCalculate();// document.querySelector('.check-all').checked = [// ...document.querySelectorAll('.list li input[type="checkbox"]'),// ].every(item => item.checked === true);}// 商品自动计算// 所有计算都是基于商品数量的变化// nums.forEach(item => console.log(item.value));// 1. 计算总数量function getTotalNum(numArr,index) {return numArr.reduce((acc, cur) => acc + cur);}// 2. 计算每个商品的金额function getAmount(numArr, priceArr) {// 金额 = 数量 * 单价return numArr.map((num, index) => num * priceArr[index]);}// console.log(getAmount([1, 2, 3], [100, 200, 300]));// 3. 计算总金额function getTotalAmount(amountArr,index) {return amountArr.reduce((acc, cur) => acc + cur);}// 数量const nums = document.querySelectorAll('.num');// 单价数组const prices = document.querySelectorAll('.price');// 4. 自动计算function autoCalculate() {// 商品数量数组const numArr = [...nums].map(num => parseInt(num.value));console.log(numArr);// 单价数组const priceArr = [...prices].map(price => parseInt(price.textContent));console.log(priceArr);// 金额数组const amountArr = getAmount(numArr, priceArr);// 循环判断是否选中 没有选中的话直接赋值为0items.forEach(function(val,index){if(val.checked === false){numArr[index] = 0;priceArr[index] = 0;}});console.log(numArr);// 未来不影响单个金额计算 重新写计算一次单个金额const amountArr2 = getAmount(numArr, priceArr);// 总数量console.log(getTotalNum(numArr));document.querySelector('.total-num').textContent = getTotalNum(numArr);// 总金额document.querySelector('.total-amount').textContent = getTotalAmount(amountArr2);// 为每个商品填充金额document.querySelectorAll('.amount').forEach((amount, index) => (amount.textContent = amountArr[index]));}// 当页面加载的时候自动计算window.onload = autoCalculate;// 当数量更新时,自动计算所有数据nums.forEach(num => (num.onchange = autoCalculate));// 作业 : 只计算选中商品的金额,同时更新总数量和总金额// vue: 计算属性, 侦听器,可以极大的简化以上过程</script></body></html>