![[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="en"><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><span>总计:</span><span class="total-num">0</span><span class="total-amount">0</span></li></ul><!-- 点击结算按钮时自动计算选中商品 --><button class="account" onclick="autoCalculate()">结算</button></div><script>function checkAll(){let status = event.target.checked;let items = document.querySelectorAll('.list li input[type="checkbox"]');items.forEach(item => (item.checked = status));}function checkItems(){let items = document.querySelectorAll('.list li input[type="checkbox"]');let status = [...items].every(item => item.checked === true);document.querySelector('.check-all').checked = status;}// 商品自动计算// 所有计算都是基于选中商品数量的变化const nums = document.querySelectorAll('.num');// 1. 计算总数量function getTotalNum(numArr) {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) {return amountArr.reduce((acc, cur) => acc + cur);}// 4. 自动计算function autoCalculate() {// 选中商品数量数组（以父节点li的第一个子元素input的checked属性判断商品是否选中）const numArr = [...nums].filter(item => item.parentNode.firstElementChild.checked === true).map(num => parseInt(num.value));console.log(numArr);// 选中单价数组const prices = document.querySelectorAll('.price');const priceArr = [...prices].filter(item => item.parentNode.firstElementChild.checked === true).map(price => parseInt(price.textContent));console.log(priceArr);// 选中金额数组const amountArr = getAmount(numArr, priceArr);console.log(amountArr);// 选中商品总数量console.log(getTotalNum(numArr));document.querySelector('.total-num').textContent = getTotalNum(numArr);// 选中商品总金额document.querySelector('.total-amount').textContent = getTotalAmount(amountArr);// 为选中的商品填充金额,未选购的商品备注const amount = document.querySelectorAll('.amount');amount.forEach((amount, index) => (amount.textContent = "未选购"));[...amount].filter(item => item.parentNode.firstElementChild.checked === true).forEach((amount, index) => (amount.textContent = amountArr[index]));}// 当页面加载的时候自动计算// window.onload = autoCalculate;// 当数量更新时,自动计算所有数据nums.forEach(num => (num.onchange = autoCalculate));</script></body></html>
