js---全选反选案例+购物车案例

最新推荐文章于 2023-11-21 15:42:31 发布

真的想不出名儿

最新推荐文章于 2023-11-21 15:42:31 发布

阅读量363

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/ioncannontic/article/details/131698972

版权

JavaScript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

全选反选案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        table {
            width: 500px;
            border: 1px solid #ccc;
            border-collapse: collapse;
            margin: 100px auto;
        }

        th,
        td {
            width: 80px;
            height: 40px;
            border: 1px solid #ccc;
            text-align: center;
        }
    </style>
</head>

<body>

    <table>
        <thead>
            <tr>
                <th><input type="checkbox" class="checkAll">全选</th>
                <th>商品</th>
                <th>商家</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" class="check"></td>
                <td>魅族20</td>
                <td>魅族</td>
                <td>2999</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="check"></td>
                <td>魅族20pro</td>
                <td>魅族</td>
                <td>4399</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="check"></td>
                <td>魅族20 infinity</td>
                <td>魅族</td>
                <td>7399</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="check"></td>
                <td>魅族18</td>
                <td>魅族</td>
                <td>2999</td>
            </tr>
        </tbody>
    </table>

    <script>
        // 1. 点击全选复选框，下面的小复选框全都选中
        const checkAll = document.querySelector('.checkAll')
        const checks = document.querySelectorAll('.check')
        checkAll.addEventListener('click', function () {
            // console.log(this.checked);
            checks.forEach(ele => ele.checked = this.checked)
        })

        // 2. 只要小复选框全部选中，全选复选框自动选中，有一个小复选框没有选中，全选复选框就不会选中
        // 每次点击小复选框，利用every遍历所有小复选框，把返回值作为状态给全选按钮
        // 注意要转换为真数组才能使用every方法

        // for (let i = 0; i < checks.length; i++) {
        //     checks[i].addEventListener('click', function () {
        //         console.log(Array.from(checks).every(ele => ele.checked === true));
        //         checkAll.checked = Array.from(checks).every(ele => ele.checked === true)
        //     })
        // }
        checks.forEach(ele => {
            ele.addEventListener('change', function () {
                checkAll.checked = Array.from(checks).every(ele => ele.checked === true)
            })
        })
    </script>
</body>

</html>

购物车案例

第一种方式：forEach遍历数组加到str中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        table {
            width: 800px;
            border: 1px solid #ccc;
            border-collapse: collapse;
            margin: 100px auto 0;
        }

        th,
        td {
            width: 120px;
            height: 60px;
            text-align: center;
            border: 1px solid #ccc;
        }

        li {
            list-style: none;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>产品</th>
                <th>规格</th>
                <th>价格</th>
                <th>数量</th>
                <th>总价</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>小米手机</td>
                <td>白色</td>
                <td>2899</td>
                <td>x23</td>
                <td>66677</td>
            </tr> -->
        </tbody>
        <tr class="total">
            <td colspan="5"></td>
        </tr>
    </table>

    <script>
        const goodsList = [
            {
                name: '小米空调',
                spec: {
                    color: '白色',
                    size: '80cm * 30cm'
                },
                price: 3499,
                count: 10,
            },
            {
                name: '魅族20',
                spec: {
                    color: '白色',
                    storage: '12+512'
                },
                price: 2999,
                count: 10,
                gift: '手机壳,耳机'
            },
            {
                name: '魅族20pro',
                spec: {
                    color: '粉色',
                    storage: '12+512'
                },
                price: 3499,
                count: 10,
                gift: '手机壳,耳机'
            },
            {
                name: '魅族20 infinity',
                spec: {
                    color: '白色',
                    storage: '12+512'
                },
                price: 7399,
                count: 10,
                gift: '手机壳,20周年限定纪念品'
            }
        ]
        let str = ''
        const tbody = document.querySelector('tbody')
        goodsList.forEach(ele => {
            const { name, spec, price, count, gift } = ele
            const { color, size, storage } = spec
            // console.log(color, size, storage);

            // 处理规格文字
            let text = Object.values(spec).join(' / ')
            // 处理赠品
            // 把字符串转化成数组 split(',')
            let giftStr = ''
            gift ? gift.split(',').forEach(ele => {
                giftStr += `<li style="color:red">【赠品】${ele}</li>`
            }) : '';
            str += `
            <tr>
                <td>
                    ${name}<br>${giftStr}
                </td>
                <td>${text}</td>
                <td>${price}</td>
                <td>x${count}</td>
                <td>${price * count}</td>
            </tr>
            `
            tbody.innerHTML = str
        })

        // 计算总计
        // 1.求和 用到reduce 累计器  总价total
        // 2.根据数据里面的数量和单价累加和，总价也要保留2位小数
        // 3.reduce有2个参数  1.回调函数  2.初始值  0
        const total = goodsList.reduce((prev, current) => prev + current.price * current.count, 0)
        const sum = document.querySelector('.total td')
        sum.innerHTML = `合计：${total.toFixed(2)}`
    </script>
</body>

</html>

第二种方式：map+join组合转换成字符串

<!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>
    <style>
        table {
            width: 600px;
            margin: 100px auto;
            border-collapse: collapse;
            border: 1px solid #f00;
        }

        th,
        td {
            border: 1px solid #f00;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }

        span {
            color: red;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>产品 </th>
                <th>规格 </th>
                <th>价格 </th>
                <th>数量 </th>
                <th>总价 </th>
            </tr>
        </thead>
        <tbody>
        </tbody>
        <tr align="right">
            <td colspan="5">合计:<span class="amount">1526</span></td>
        </tr>
    </table>
    <script>
        // 1.根据后台提供的数据 渲染购物车页面
        const goodsList = [
            {
                id: "4001172",
                name: "小米手机",
                price: 2899,
                spec: { color: '白色' },
                count: 23,
                gift: "手机壳,手机膜"
            },
            {
                id: "4001173",
                name: "小米1",
                price: 2199,
                spec: { color: '白色' },
                count: 23,
                gift: "手机壳,手机膜"
            },
            {
                id: "4001174",
                name: "小米摄像头",
                price: 3700,
                spec: { color: '黑色' },
                count: 23

            },
            {
                id: "4001175",
                name: "小米空调",
                price: 3100,
                spec: { color: '白色', size: "40cm*40cm" },
                count: 23,
                gift: "壳,防尘布"
            }
        ]

        //   1.渲染+join来遍历 ，有多少条数据，渲染多少商品 
        // 对象解构   单价要保留2位小数   2899.00  toFixed(2)

        document.querySelector('tbody').innerHTML = goodsList.map(ele => {
            // 对象解构
            const { name, price, count, spec, gift } = ele
            console.log(gift)
            // 处理规格文字
            const text = Object.values(spec).join('/')
            // 处理赠品
            // 把字符串转换为数组split(',')  map+join生成对应标签 
            // 判断是否有gift属性  没有的话 不需要map+join生成标签
            // console.log(gift.split(','))
            const str = gift ? gift.split(',').map(ele => `<span>【赠品】${ele}</span>`).join('') : ""
            // console.log(str)

            return `<tr>
                <td>
                    ${name}
                    <br/>
                    ${str} 
                </td>
                <td>
                  ${text}    
                </td>
                <td>${price.toFixed(2)}</td>
                <td>x${count}</td>
                <td>${(count * price).toFixed(2)}</td>
            </tr>`;
        }).join('')

        // 总价业务
        // 1.求和 用到reduce 累计器  总价total
        // 2.根据数据里面的数量和单价累加和，总价也要保留2位小数
        // 3.reduce有2个参数  1.回调函数  2.初始值  0
        const total = goodsList.reduce((prev, current) => prev + current.price * current.count, 0)
        console.log(total.toFixed(2))
        document.querySelector('.amount').innerHTML = total.toFixed(2)
    </script>
</body>

</html>