js之购物车自动计算
16lz
2021-04-18
代码块
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>购物车全选</title><link rel="stylesheet" href="0412/style.css"></head><body><table><caption>购物车</caption><thead><tr><!-- 全选复选框 --><th><input type="checkbox" name="checkAll" id="check-all" checked /><label for="check-all">全选</label></th><th>图片</th><th>品名</th><th>单位</th><th>单价/元</th><th>数量</th><th>金额/元</th></tr></thead><tbody><tr><td><input type="checkbox" name="item" value="SN-1020" checked /></td><td><a href=""><img src="images/p1.jpg" alt="" /></a></td><td>iPhone 11</td><td>台</td><td class="price">4799</td><td><input type="number" min="1" value="1" /></td><td class="amount">4799</td></tr><tr><td><input type="checkbox" name="item" value="SN-1020" checked /></td><td><a href=""><img src="images/p2.jpg" alt="" /></a></td><td>小米pro 11</td><td>部</td><td class="price">3999</td><td><input type="number" min="1" value="2" /></td><td class="amount">7998</td></tr><tr><td><input type="checkbox" name="item" value="SN-1030" checked /></td><td><a href=""><img src="images/p3.jpg" alt="" /></a></td><td>MacBook Pro</td><td>台</td><td class="price">18999</td><td><input type="number" min="1" value="1" /></td><td class="amount">18999</td></tr><tr><td><input type="checkbox" name="item" value="SN-1040" checked /></td><td><a href=""><img src="images/p4.jpg" alt="" /></a></td><td>小米75电视</td><td>台</td><td class="price">5999</td><td><input type="number" min="1" value="2" /></td><td class="amount">11998</td></tr><tr><td><input type="checkbox" name="item" value="SN-1050" checked /></td><td><a href=""><img src="images/p5.jpg" alt="" /></a></td><td>Canon 90D单反</td><td>台</td><td class="price">9699</td><td><input type="number" min="1" value="1" /></td><td class="amount">9699</td></tr></tbody><tfoot><tr style="font-weight: bolder; font-size: 1.2em"><td colspan="5">总计:</td><td id="sum">7</td><td id="total-amount">53493</td></tr></tfoot></table><div style="width: 90%; margin: 10px auto"><button style="float: right; width: 100px">结算</button></div><script>// Array.every(callback) 每个成员回调处理后全部为true，返回结果为true//Array.some(callback) 只要有一个结果是true，返回结果就为true// console.log([4,5,6].every((item) => item>1))// console.log([4,5,6].some((item) => item>=6))const checkAll = document.querySelector('#check-all');const checkItems = document.getElementsByName("item");let checkStatus =[];// 为全选按钮添加效果checkAll.onchange = (ev) => checkItems.forEach((item) => {item.checked = ev.target.checked;});//3.为每个单独的商品复选框添加change事件checkItems.forEach(item => {item.onchange=()=>{autoCalculate();checkAll.checked = [...checkItems].every(item=>item.checked)}})//自动计算const numInput = document.querySelectorAll('tbody input[type="number"]');//用户更新数量时自动计算numInput.forEach(input=> (onchange=autoCalculate));//自动计算函数function autoCalculate() {//单价数组const prices = document.querySelectorAll('tbody .price');//forEach()没有返回值，这里用一个和它一样功能的有返回值的方法：map（）const priceArr = [...prices].map(price => price.textContent * 1);//数量数组const numbers = document.querySelectorAll('tbody input[type=number]');// 每次进来复选框按钮进行重置checkStatus = [];// 得到复选框的状态数组checkItems.forEach(item => {checkStatus.push(item.checked)})const numArr = [...numbers].map((num,index) => {if (checkStatus[index] == true) {return num.value * 1}else {return false;}});//金额 数量*单价let sum = numArr.reduce((pre,cur) => pre+cur);const amountArr = [priceArr,numArr].reduce((total,curr) => total.map((item,index)=>item*curr[index]));// 将计算结果渲染到页面中document.querySelector("#sum").textContent = String(sum);document.querySelector('#total-amount').textContent = amountArr.reduce((pre,cur)=>pre+cur);//渲染每个商品的金额document.querySelectorAll('.amount').forEach((item,index) => item.textContent = amountArr[index]);//页面加载后自动计算window.onload = autoCalculate;}</script></body></html>
效果
更多相关文章
- 【Vue框架学习】Vue常用指令、事件修饰符、按键修饰符、计算属性
- 容器计算资源管理&网络QoS的实现---Openshift3.9学习系列第四篇
- vue2基础语法2与监听属性和计算属性
- Vue自学之路10-简单的计算器
- 当面试官问我ArrayList和LinkedList哪个更占空间时，我这么答让他
- 悟透前端：javascript数组之includes、reduce
- JavaScript数组扁平化的黑科技
- 从计算机视觉到人脸识别：一文看懂颜色模型、信号与噪声
- 第14部分- Linux ARM汇编数组/结构体/索引