计算-金额 - - php.cn博客

<!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>购物车</title>
    <style>
        .box {
            width: 22em;
            height: 2em;
        }
        .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;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="selectAll">
            <!-- checkAll(): 当全选按钮的状态发生变化化,触发该事件 change  -->
            <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>
                <input type="checkbox" onchange="checkItems()"  checked />
                <span class="content">游戏机</span>
                <input type="number" value="2" min="1" class="num" />
                <span class="price">3000</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>
        var items = document.querySelectorAll('.list li input[type="checkbox"]');
        // 1. 全选
        function checkAll() {
            // 1. 全选按钮状态
            let status = event.target.checked;
            // console.log(status);
            // 2. 根据状态动态设置所有商品的状态
            items.forEach(item => (item.checked = status));
            autoCalculate();
            // document
            //     .querySelectorAll('.list li input[type="checkbox"]')
            //     .forEach(item => (item.checked = event.target.checked));
        }
        // 2. 根据用户选择来动态设置全选状态
        function checkItems() {
            // 1.  拿到全部商品
      //      let items = document.querySelectorAll('.list li input[type="checkbox"]');
            // 2. 判断状态,只有全部被选择,才需要设置全选为true, array.every
            let status = [...items].every(item => item.checked === true);
            // console.log(status);
            // 3. 将这个新状态设置到全选按钮
            document.querySelector('.check-all').checked = status;
            autoCalculate();
                    // document.querySelector('.check-all').checked = [
            //     ...document.querySelectorAll('.list li input[type="checkbox"]'),
            // ].every(item => item.checked === true);
        }
        // 商品自动计算
        // 所有计算都是基于商品数量的变化
        // nums.forEach(item => console.log(item.value));
        // 1. 计算总数量
        function getTotalNum(numArr,index) {
            return numArr.reduce((acc, cur) => acc + cur);
        }
        // 2. 计算每个商品的金额
        function getAmount(numArr, priceArr) {
            // 金额 = 数量 * 单价
            return numArr.map((num, index) => num * priceArr[index]);
        }
        // console.log(getAmount([1, 2, 3], [100, 200, 300]));
        // 3. 计算总金额
        function getTotalAmount(amountArr,index) {
            return amountArr.reduce((acc, cur) => acc + cur);
        }
        // 数量
        const nums = document.querySelectorAll('.num');
        // 单价数组
        const prices = document.querySelectorAll('.price');
        // 4. 自动计算
        function autoCalculate() {
            // 商品数量数组
            const numArr = [...nums].map(num => parseInt(num.value));
            console.log(numArr);
            // 单价数组
            const priceArr = [...prices].map(price => parseInt(price.textContent));
            console.log(priceArr);
            // 金额数组
            const amountArr = getAmount(numArr, priceArr);
            // 循环判断是否选中 没有选中的话直接赋值为0
            items.forEach(function(val,index){
                    if(val.checked === false){
                         numArr[index] = 0;
                         priceArr[index] = 0;
                    }
            });
            console.log(numArr);
            // 未来不影响单个金额计算 重新写计算一次单个金额
            const amountArr2 = getAmount(numArr, priceArr);
            // 总数量
            console.log(getTotalNum(numArr));
            document.querySelector('.total-num').textContent = getTotalNum(numArr);
            // 总金额
            document.querySelector('.total-amount').textContent = getTotalAmount(amountArr2);
            // 为每个商品填充金额
            document.querySelectorAll('.amount').forEach((amount, index) => (amount.textContent = amountArr[index]));
        }
        // 当页面加载的时候自动计算
        window.onload = autoCalculate;
        // 当数量更新时,自动计算所有数据
        nums.forEach(num => (num.onchange = autoCalculate));
        // 作业 : 只计算选中商品的金额,同时更新总数量和总金额
        // vue: 计算属性, 侦听器,可以极大的简化以上过程
    </script>
</body>
</html>