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

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

效果：

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

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

2022-08-29 13:47:39