dom&Bom_04Day

webApi

前端

发布日期: 2022-05-25

更新日期: 2022-07-11

文章字数: 1.8k

阅读时长: 9 分

阅读次数:

购物车案例

597

技巧：

1-一个事件如点击会影响到谁，就把被影响的东西写到这个事件源的function里面

如点加号，会改变数量，还会改变小计，和总价，就把他们三个的变化写到加号的监听器里面

加号对象.addEventListener('click',function(){
 小计对象.innerHTML='xxx'
 数量input对象.value='xxx'
 总价格对象.innerText='xxx'
 //这里的操作如总价的变化，也可以在外写一个函数，调用函数修改text即可
//什么时候用函数呢，因为加减都要变化总价，所以需要代码复用，所以用函数代替可以减少代码
})

注意：

1- // div span ul li 标签有文字内容怎么得到或则设置文字内容呢元素.innerText 元素.innerHTML

// 表单 input 单选复选 textarea select 怎么得到或则设置值表单的value

// 特殊的 button 是通过inner来设置*

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>购物车全选功能</title>
    <!-- 引入初始化 -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: #666;
        }

        body {
            background: #fff;
            color: #666;
            font-size: 14px;
        }

        input {
            outline: none;
        }

        .clearfix::before,
        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }
    </style>
    <!-- 引入购物车样式 -->
    <style>
        table {
            width: 800px;
            margin: 0 auto;
            border-collapse: collapse;
        }

        th {
            font: normal 14px/50px '宋体';
            color: #666;
        }

        th,
        td {
            border: none;
            text-align: center;
            border-bottom: 1px dashed #ccc;
        }

        input[type='checkbox'] {
            width: 13px;
            height: 13px;
        }

        tbody p {
            position: relative;
            bottom: 10px;
        }

        tbody .add,
        tbody .reduce {
            float: left;
            width: 22px;
            height: 22px;
            border: 1px solid #ccc;
            text-align: center;
            background: none;
            outline: none;
            cursor: pointer;
        }

        tbody input[type='text'] {
            width: 50px;
            float: left;
            height: 18px;
            text-align: center;
        }

        tbody .count-c {
            width: 98px;
            margin: 0 auto;
        }

        button[disabled] {
            color: #ddd;
            cursor: not-allowed;
        }

        tbody tr:hover {
            background: #eee;
        }

        tbody tr.active {
            background: rgba(241, 209, 149, 0.945);
        }

        .controls {
            width: 790px;
            margin: 10px auto;
            border: 1px solid #ccc;
            line-height: 50px;
            padding-left: 10px;
            position: relative;
        }

        .controls .del-all,
        .controls .clear {
            float: left;
            margin-right: 50px;
        }

        .controls p {
            float: right;
            margin-right: 100px;
        }

        .controls span {
            color: red;
        }

        .controls .pay {
            position: absolute;
            right: 0;
            width: 80px;
            height: 54px;
            background: red;
            font: bold 20px/54px '宋体';
            color: #fff;
            text-align: center;
            bottom: -1px;
        }

        .controls .total-price {
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="car">
        <table>
            <thead>
                <tr>
                    <th><input type="checkbox" id="all" />全选</th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>商品数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="carBody">
                <tr>
                    <td>
                        <input class="s_ck" type="checkbox" readonly />
                    </td>
                    <td>
                        <img src="./images/01.jpg" />
                        <p>牛奶</p>
                    </td>
                    <td class="price">5￥</td>
                    <td>
                        <div class="count-c clearfix">
                            <button class="reduce" disabled>-</button>
                            <input type="text" value="1" />
                            <button class="add">+</button>
                        </div>
                    </td>
                    <td class="total">5￥</td>
                    <td>
                        <a href="javascript:" class="del">删除</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input class="s_ck" type="checkbox" />
                    </td>
                    <td>
                        <img src="./images/01.jpg" />
                        <p>牛奶</p>
                    </td>
                    <td class="price">10￥</td>
                    <td>
                        <div class="count-c clearfix">
                            <button class="reduce" disabled>-</button>
                            <input type="text" value="1" />
                            <button class="add">+</button>
                        </div>
                    </td>
                    <td class="total">20￥</td>
                    <td>
                        <a href="javascript:" class="del">删除</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input class="s_ck" type="checkbox" />
                    </td>
                    <td>
                        <img src="./images/01.jpg" />
                        <p>牛奶</p>
                    </td>
                    <td class="price">20￥</td>
                    <td>
                        <div class="count-c clearfix">
                            <button class="reduce" disabled>-</button>
                            <input type="text" value="1" />
                            <button class="add">+</button>
                        </div>
                    </td>
                    <td class="total">40￥</td>
                    <td>
                        <a href="javascript:" class="del">删除</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input class="s_ck" type="checkbox" />
                    </td>
                    <td>
                        <img src="./images/01.jpg" />
                        <p>牛奶</p>
                    </td>
                    <td class="price">35￥</td>
                    <td>
                        <div class="count-c clearfix">
                            <button class="reduce" disabled>-</button>
                            <input type="text" value="1" />
                            <button class="add">+</button>
                        </div>
                    </td>
                    <td class="total">70￥</td>
                    <td>
                        <a href="javascript:" class="del">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="controls clearfix">
            <a href="javascript:" class="del-all">删除所选商品</a>
            <a href="javascript:" class="clear">清理购物车</a>
            <a href="javascript:" class="pay">去结算</a>
            <p>
                已经选中<span id="totalCount">0</span>件商品;总价：<span id="totalPrice" class="total-price">0￥</span>
            </p>
        </div>
    </div>
    <script>
        //   商品数量模块与删除操作
        // 获取商品数量模块所有的控件对象,加减与输入框与删除操作
        let adds = document.querySelectorAll('.add')
        let reduces = document.querySelectorAll('.reduce')
        // 删除字体
        let dels = document.querySelectorAll('.del')
        // 获取删除字体的爸爸的爸爸，因为需要remove删除字体的爸爸
        let carbody =document.querySelector('#carBody')
        // 获取所有inputs里面商品数量
        let inputs = document.querySelectorAll('.count-c input')
        // 获取所有的单价
        let prices = document.querySelectorAll('.price')
        // 获取所有的小计
        let totals = document.querySelectorAll('.total')
        // 获取总价格对象
        let totalsResult = document.querySelector('#totalPrice')
        // 获取总商品数量
        let totalCount = document.querySelector('#totalCount')
        // 在页面加载时，就调用一次总价格和总数量
        totalNumPrice()
        // 给上述对象添加事件
        for (let i = 0; i < adds.length; i++) {
            // 1点加号事件
            adds[i].addEventListener('click', function () {
                inputs[i].value++
                reduces[i].disabled = false
                totals[i].innerText = parseFloat(prices[i].innerText) * inputs[i].value + '￥'
                totalNumPrice()
            })
            // 2点减号事件
            reduces[i].addEventListener('click', function () {
                inputs[i].value--
                totals[i].innerText = parseFloat(prices[i].innerText) * inputs[i].value + '￥'
                if (inputs[i].value == 1) {
                    reduces[i].disabled = true
                }
                totalNumPrice()
            })
            // 3 点删除事件
            dels[i].addEventListener('click',function(){
                // 用数组删是没用的，因为tr变化，那么里面的节点顺序也发生变化，无法正确取到儿子
                    carBody.removeChild(this.parentNode.parentNode)
                    totalNumPrice()
            })
        }
        // 算总价格和总数量并输出
        function totalNumPrice() {
            // 因为这个小计和数量是变化的，所以每次要重新获取，否则就一直是刚开始页面的数量个数
            // 获取所有的小计
            let totals = document.querySelectorAll('.total')
            // 获取所有inputs里面商品数量
            let inputs = document.querySelectorAll('.count-c input')
            // 总价sum
            let sum = 0
            // 总数量number
            let number = 0
            for (let j = 0; j < adds.length; j++) {

                sum += parseFloat(totals[j].innerText)
                console.log(inputs[j].innerText)
                number += parseFloat(inputs[j].value)
                totalsResult.innerText = sum + '￥'
                totalCount.innerText = number


            }
        }

    </script>

</body>

</html>

事件对象

598

事件对象就是一个对象，存储了一个事件发生时，触发的相关信息

599

如上图，事件对象就存储了鼠标点击的位置等放在e对象里（这个名字随便取，常用e，event，ev）

它看似是一个形参，其实是一个声明定义好的对象

事件对象常用属性

600

601

offsetX/Y是鼠标距离事件源元素左上角的位置

clientX/Y是鼠标距离可见浏览器窗口左上角的位置。

事件对象e还有pageX和pageY的属性，它是根据整个浏览器网页大小距离窗口左上角来取值

参考https://www.bilibili.com/video/BV1AT4y1v75t?p=40

案例

602

    <style>
        img{
            /* 绝对定位，以窗口为参照物 */
            position: absolute;
            left: 0px;
            top: 0px;
        }
    </style>
</head>
<body>
    <img src="./images/tianshi.gif" alt="">
    <script>
        let img =document.querySelector('img')
        // document对象不需要获取，以前获取的元素对象都是从document找的
        // document添加监听器，就相当于整个页面都加了
        document.addEventListener('mouseover',function(e){
                img.style.left= e.pageX+'px'
                img.style.top= e.pageY+'px'
        })
    </script>

其中用到了mousemove的事件，就是鼠标移动，mouseenter/mouseleave是鼠标移入和离开

没写完

瑾年

https://www.zhoudongqi.com/archives/5029c218.html

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源周东奇 !

本站所发布的一切内容,包括但不限于IT技术资源,网络攻防教程及相应程序等文章仅限用于学习和研究目的:不得将上述内容用于商业或者非法用途,否则一切后果请用户自负。本站部分信息与工具来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如有侵权请邮件(jinnian770@gmail.com)与我们联系处理。

webApi

dom&Bom_02Day

佛，道，学，皆是寻求心灵的归宿。

2022-05-25 前端

webApi

dom&Bom_03Day

道可道非常道，一些都在发展中，不是一时能够完成的，是动态的。

2022-05-25 前端

webApi

购物车案例

事件对象

你的赏识是我前进的动力