一、购物车选择或不选商品时,并自动过滤未选商品,自动计算

思路：
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>

效果：

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

0810-变量引用、字符串函数

2022-08-29 13:47:39