【Web】0基础学Web—tab切换、全选与反选、购物车

news2025/1/8 15:16:51

0基础学Web—tab切换、全选与反选、购物车

teb切换
- style样式
- 代码
全选与反选
- 事件
购物车

teb切换

style样式

<style>
    .tabs {
        display: flex;
        justify-content: space-between
    }
    .main {
        width: 800px;
        margin: 0 auto
    }
    .active {
        background-color: #b53838;
    }
    .contents>li {
        width: 800px;
        height: 500px;
        background-color: #75bda7;
        display: none;
    }
    .contents>li:first-of-type {
        display: block;
    }
</style>

代码

<body>
    <div class="wrapper">
        <div class="main">
            <ul class="tabs">
                <li>品牌介绍</li>
                <li>规格包装</li>
                <li>售后保障</li>
                <li>商品评价</li>
            </ul>
            <ul class="contents">
                <li>品牌介绍内容</li>
                <li>规格包装内容</li>
                <li>售后保障内容</li>
                <li>商品评价内容</li>
            </ul>
        </div>
    </div>
    <script>
        let _ts = document.querySelectorAll('.tabs>li')
        let _cs = document.querySelectorAll('.contents>li')
        _ts.forEach((_li, index) => {
            _li.onclick = function () {
                //先去掉所有li的背景样式
                for (const ele of _ts) {
                    ele.classList.remove('active')
                }
                //先隐藏所有内容
                for (const ele of _cs) {
                    ele.style.display = 'none'
                }
                //再添加当前的样式
                _li.classList.add('active')
                //再显示当前的内容
                _cs[index].style.display = 'block'
            }
        })
    </script>
</body>

全选与反选

事件

      onclick：点击
      onchange: 改变
      onmouseover:鼠标悬浮触发
      onblur: 表单失去焦点
      onfocus: 表单光标聚集时

<body>
    <div class="wrapper">
        <input type="checkbox" class="all">全选
        <hr>
        <input type="checkbox">编程
        <input type="checkbox">购物
        <input type="checkbox">打球
        <input type="checkbox">打游戏
        <input type="checkbox">熬夜
    </div>
    <script>
        let _all = document.querySelector('.all')  //全选
        let _hobbys = document.querySelectorAll('input:not(.all)')  //全选

        //全选
        //给all加onchange事件
        _all.onchange = function () {
            for (const _hobby of _hobbys) {
                //每一个爱好的checked值与全选的一致
                _hobby.checked = _all.checked
            }
        }

        //反选
        _hobbys.forEach(_hobby => {
            _hobby.onchange = function () {
                //过滤出已选中的hobby（checked=true）
                let checkedHobbys = [..._hobbys].filter(ele => ele.checked == true)
                _all.checked = checkedHobbys.length == _hobbys.length
            }
        })
    </script>
</body>

购物车

<body>
    <div class="wrapper">
        <table border="1" cellspacing="0" rules="all">
            <thead>
                <tr>
                    <td><input type="checkbox" class="all"></td>
                    <td>商品名</td>
                    <td>商品单价</td>
                    <td>购买数量</td>
                    <td>小计</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>笔记本电脑</td>
                    <td>4000</td>
                    <td>
                        <button class="cal">+</button>
                        <input type="text" value="1" style="width: 40px;">
                        <button class="cal" disabled>-</button>
                    </td>
                    <td><span>4000</span></td>
                    <td class="rem" onclick="remo(this)">移除</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>机械鼠标</td>
                    <td>120</td>
                    <td>
                        <button class="cal">+</button>
                        <input type="text" value="1" style="width: 40px;">
                        <button class="cal" disabled>-</button>
                    </td>
                    <td><span>120</span></td>
                    <td class="rem" onclick="remo(this)">移除</td>
                </tr>
                <tr>
                    <td colspan="6" style="text-align: right;">总价：<span id="total">0</span></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script>
    //获取全选
    let _all = document.querySelector('.all')  //全选
    //获取所有商品复选框
    let goodscheckbox = document.querySelectorAll('input[type=checkbox]:not(.all)')
    //全选
    //给all加onchange事件
    _all.onchange = function () {
        for (const goodch of goodscheckbox) {
            //每一个商品的checked值与全选的一致
            goodch.checked = _all.checked
        }

        sumtotal()  //重新计算总价
    }

    //反选
    goodscheckbox.forEach(goodch => {
        goodch.onchange = function () {
            //过滤出已选中的商品（checked=true）
            let checkedgoods = [...goodscheckbox].filter(ele => ele.checked == true)
            _all.checked = checkedgoods.length == goodscheckbox.length

            sumtotal()  //重新计算总价
        }
    })

    //获取所有加减号
    let _cals = document.querySelectorAll('.cal')
    _cals.forEach(_cal => {
        _cal.onclick = function () {
            // 获取当前数量
            let _num = _cal.parentElement.children[1].value * 1
            if (_cal.innerText == '+') {
                _cal.nextElementSibling.nextElementSibling.disabled = false  //减号启用
                _num += 1
            } else {
                if (_num <= 2) {
                    _cal.disabled = true  //禁用
                }
                _num -= 1
            }
            _cal.parentElement.children[1].value = _num   //更新input框的值

            //获取单价
            let unitprice = _cal.parentElement.previousElementSibling.innerText * 1

            //更新小计
            _cal.parentElement.nextElementSibling.firstElementChild.innerText = _num * unitprice

            sumtotal()  //重新计算总价

        }

    })



    //计算总价，将所有选中的小计相加
    let _total = document.querySelector('#total')
    function sumtotal() {
        let sum = 0
        //过滤出已选中的商品
        let checkedgoods = [...goodscheckbox].filter(ele => ele.checked == true)
        checkedgoods.forEach(checkedgood => {
            let xiaoji = checkedgood.parentElement.parentElement.children[4].innerText * 1
            sum += xiaoji
        })
        _total.innerText = sum

    }
</script>