<!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>实战3-购物车</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="box"> <!-- 1. 全选按钮 --> <div class="selectAll"> <!-- change: 当它的值发生改变时触发 --> <!-- checked: 当前是选中状态, 布尔属性 --> <input type="checkbox" class="check-all" name="check-all" onchange="checkAll()" checked /> <label for="check-all">全选</label> </div> <!-- 2. 商品列表 --> <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> <!-- 3. 结算按钮 --> <button class="account">结算</button> </div> <script> // 1. 选做: 购物车选择或不选商品时,并自动过滤未选商品,自动计算 // (一) 全选的自动设置 // 1. 全选 function checkAll() { // 第1步: 获取当前按钮的状态 let status = event.target.checked; // 第2步: 根据当前状态,来动态的设置其它所有商品的选中状态 const items = document.querySelectorAll('.list li input[type="checkbox"]'); // console.log(items); items.forEach((item) => (item.checked = status)); // document // .querySelectorAll('.list li input[type="checkbox"]') // .forEach(item => (item.checked = event.target.checked)); //勾选重新算 chageCalculate(); } // 2. 根据用户的选择来动态的设置"全选"按钮的状态 // 第1步: 获取全部的商品 const items = document.querySelectorAll('.list li input[type="checkbox"]'); function checkItems() { // 第2步: 判断当前状态, 只有全部选中, 才返回 true,否则就返回false // console.log([...items]); // console.log(Array.from(items)); let status = [...items].every((item) => item.checked === true); // console.log(status); // 第3步: 用这个状态来更新全选按钮 document.querySelector(".check-all").checked = status; } // (二) 商品的自动计算 // 获取所有商品数量的元素 const nums = document.querySelectorAll(".list .num"); // 1. 计算商品总数 function getTotalNum(numArr) { return numArr.reduce((acc, cur) => acc + cur); } // let numArr = [...nums].map(item => parseInt(item.value)); // console.log(getTotalNum(numArr)); // 2. 计算每个商品的金额: 数量 * 单价 // numArr: 数量数组, priceArr: 单价数组 function getAmount(numArr, priceArr) { // 用map(), 不用forEach? 因为map有返回值 return numArr.map((num, index) => { // console.log(num, index); // 以index为索引条件在priceArr中进行查询获取与数量对应的单价 return num * priceArr[index]; }); } // console.log(getAmount([1, 2, 3], [100, 200, 300])); // 3. 计算总金额 function getTotalAmount(amountArr) { return amountArr.reduce((acc, cur) => acc + cur); } // console.log(getTotalAmount(getAmount([1, 2, 3], [100, 200, 300]))); // 自动计算的通用方法 function autoCalculate() { // 单价数组 const prices = document.querySelectorAll(".list .price"); let priceArr = [...prices].map((item) => parseInt(item.textContent)); // 数量数组 let numArr = [...nums].map((item) => parseInt(item.value)); // 金额数组: 数量数组 * 单价数组 const amountArr = getAmount(numArr, priceArr); // console.log(amountArr); // 将以上数量添加到页面 // 1. 将总数量添加到页面 document.querySelector(".total-num").textContent = getTotalNum(numArr); // 2. 将每个商品的金额填充 document.querySelectorAll(".amount").forEach((item, index) => (item.textContent = amountArr[index])); // 3. 填充总金额 document.querySelector(".total-amount").textContent = getTotalAmount(amountArr); } //勾选改变 function chageCalculate() { //如果都为空，则清空数据 let res = [...items].some((item, index) => item.checked); if (!res) { // 1. 将总数量添加到页面 document.querySelector(".total-num").textContent = 0; // 2. 将每个商品的金额填充 // document.querySelectorAll(".amount").forEach((item, index) => (item.textContent = 0)); // 3. 填充总金额 document.querySelector(".total-amount").textContent = 0; return false; } console.log(res); // 单价数组 const prices = document.querySelectorAll(".list .price"); let priceArr = [...prices].map((item) => parseInt(item.textContent)); // 数量数组 let numArr = [...nums].map((item) => parseInt(item.value)); //勾选的数量 numArr = numArr.filter(function (item, index) { return items[index].checked; }); //勾选的商品金额 priceArr = priceArr.filter((item, index) => [...items][index].checked); console.log(numArr, priceArr); // 金额数组: 数量数组 * 单价数组 const amountArr = getAmount(numArr, priceArr); // console.log(amountArr); // 将以上数量添加到页面 // 1. 将总数量添加到页面 document.querySelector(".total-num").textContent = getTotalNum(numArr); // 2. 将每个商品的金额填充 let amount = document.querySelectorAll(".amount"); console.log(amount); amount = [...amount].map((item) => parseInt(item.textContent)); console.log(amount); amount = amount.filter((item, index) => [...items][index].checked); console.log(amount); amount.forEach((item, index) => (item.textContent = amountArr[index])); // 3. 填充总金额 document.querySelector(".total-amount").textContent = getTotalAmount(amountArr); } // 当页面加载时,根据默认值进行自动计算 // window.addEventListener('load', autoCalculate, false); window.onload = autoCalculate; // 当用户更新商品数量时, 将会触发商品金额,总数量,和总金额的动态更新 console.log(nums); nums.forEach((item) => (item.onchange = autoCalculate)); items.forEach((item) => (item.onchange = chageCalculate)); </script> <script> // 2. 实例演示JSON常用的二个API, 并详细描述前后端交互的原理与JSON的优势s // JSON.stringify() 对js对象进行json数据格式化 let obj = { 1: "2", 8: "dd", d: "mo", 88: [2, 3, 46, 71, 9], }; console.log(JSON.stringify(obj)); //JSON.parse(),对json数据转为js对象 let res = JSON.parse(JSON.stringify(obj)); console.log(res); //前后端都是按照json格式编码和解码，只是不同的端的api接口不一样，但是json字符串格式是一样的，有利于json字符串的在不同平台被识别和解码。 </script> </body></html>
