一、购物车选择或不选商品时,并自动过滤未选商品,自动计算
思路：
1、在勾选和取消商品时触发重新计算
2、在计算总金额时判断商品勾选的状态
3、在计算总数量时判断商品勾选的状态
4、在全选时触发重新计算
HTML部分代码：
<!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>Document</title><link rel="stylesheet" href="./static/css/reset.css"><link rel="stylesheet" href="test.css"></head><body><div class="box"><!-- 全选按钮 --><div class="selectall"><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">结算</button></div><script>// 全选事件函数function checkAll(){// 获取当前按钮的状态let status = event.target.checked;// 根据当前状态，动态设置其他所有商品的选中状态。const items = document.querySelectorAll('.list li input[type="checkbox"]');items.forEach(items => (items.checked = status));// 在全选时触发重新计算autoCalculate();}// 单个商品的选择与否对全选的影响函数function checkItems(){// 获取所有的商品const items = document.querySelectorAll('.list li input[type="checkbox"]');// 判断当前状态，只有全部选中，才返回true，否则返回false。let status = [...items].every(item => item.checked === true);//根据状态更新全选按钮document.querySelector('.check-all').checked = status;// 在勾选和取消商品时触发重新计算autoCalculate();}// 获取所有商品数量的元素const nums = document.querySelectorAll('.list .num');// 计算商品总数function getTotalNum(numArr){const items = document.querySelectorAll('.list li input[type="checkbox"]');let item = [...items].map(item => item.checked);let tn = 0;for(let i= 0; i < numArr.length; i++){// console.log(i);// 在计算总数量时判断商品勾选的状态if(item[i] == true)tn = tn + numArr[i];}return tn;}let numArr = ([...nums].map(item => parseInt(item.value)));// 计算每个商品金额：数量*单价，数量数组numArr，单价数组priceArr。function getAmount(numArr, priceArr){return numArr.map((num, index) => {// console.log(num, index);// index用来回去单价return num * priceArr[index];});}// console.log(getAmount([1, 2, 3],[100, 200, 300]));// 计算总金额function getTotalAmount(amountArr){const items = document.querySelectorAll('.list li input[type="checkbox"]');let item = [...items].map(item => item.checked);let ta = 0;for(let i= 0; i < amountArr.length; i++){// console.log(i);// 在计算总金额时判断商品勾选的状态if(item[i] == true)ta = ta + amountArr[i];}return ta;}// console.log(getTotalAmount(getAmount([1, 2, 3],[100, 200, 300])));// 自动计算的通用方法function autoCalculate(){// 数量数组let numArr = [...nums].map(item => parseInt(item.value));// 单价数组const prices = document.querySelectorAll('.list .price');let priceArr = [...prices].map(item => item.textContent);// console.log(priceArr);// 金额数组const amountArr = getAmount(numArr, priceArr);// console.log(amountArr);// 将数据添加到页面中显示// 总数量document.querySelector('.total-num').textContent = getTotalNum(numArr);// 每个商品的金额document.querySelectorAll('.amount').forEach((item, index) => (item.textContent = amountArr[index]));// 总金额document.querySelector('.total-amount').textContent = getTotalAmount(amountArr);}// 当页面加载时根据默认值自动计算window.addEventListener('load', autoCalculate, false);// 当用户更新商品数量时，将会触发商品金额，总数量的动态更新。nums.forEach(item => (item.onchange = autoCalculate));</script></body></html>
CSS部分代码：
.box {width: 22em;height: 2em;/* background-color: aqua; */}.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;}
效果如下：
当取消手机后，
重新全选后，
取消全选后，
二、实例演示JSON常用的二个API, 并详细描述前后端交互的原理与JSON的优势
json本质就是字符串，是格式化的字符串。优势在于简单通用，各种语言可以把他作为中介来传递数据。
常用的两个API
前端到后端：JSON.stringify()
后端到前端：JSON.parse()
前端到后端，js对象到json数据。
<script>const json_obj = {id: 1,sex: 'man',name:'json',isMarried: false,}console.log(JSON.stringify(json_obj));</script>
效果：
后端到前端，json数据到js对象
<script>let str = `{"id": 1,"sex": "man","name":"json","isMarried": false}`;console.log(JSON.parse(str));</script>
效果：