JS排他思想

dsus ch

已于 2022-08-17 18:15:58 修改

阅读量353

点赞数

文章标签： javascript 前端 html css3

于 2022-08-17 12:23:52 首次发布

本文链接：https://blog.csdn.net/m0_63953314/article/details/126337389

版权

案例一

<!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>排他思想</title>
</head>

<body>
    <button>按钮一</button>
    <button>按钮二</button>
    <button>按钮三</button>
    <button>按钮四</button>
    <script>
        //获取元素
        btn_list = document.querySelectorAll('button')
        for (let i = 0; i < btn_list.length; i++) {
            //绑定事件
            btn_list[i].onclick = function () {
                //用口诀，先清除所有人的样式，再设置自己的
                for (let j = 0; j < btn_list.length; j++) {
                    btn_list[j].style.backgroundColor = ''
                }
                this.style.backgroundColor = 'coral'
            }
        }
    </script>
</body>

</html>

案例二：图片换肤

css代码

        * {
            margin: 0;
            border: 0;
        }

        body {
            /* 网页的url需要加引号 */
            background-image: url(图片/photo-1657857285379-b6bc135b6105.webp);
            /* 背景图垂直、水平均居中 */
            background-position: center center;
            /* 背景图不平铺 */
            background-repeat: no-repeat;
            /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
            background-attachment: fixed;
            /* 让背景图基于容器大小伸缩 */
            background-size: cover;
        }

        table {
            background-color: antiquewhite;
            border-radius: 6px;
            margin: 0 auto;
            position: relative;
            top: 50px;
        }

        img {
            width: 150px;
        }

js代码

        let img_list = document.getElementsByTagName('table')[0].getElementsByTagName('img')//先获取父元素，再获取父元素内的所有子元素
        //绑定事件
        for (let i = 0; i < img_list.length; i++) {
            img_list[i].onclick = function () {
                document.body.style.backgroundImage = "url(" + this.src + ")"
                //注意背景属性赋值类型是字符串，this.src返回的是字符串型的地址，所以需要加号拼接
            }
        }

案例三：表格光标移动变色

案例中出现的两个事件，onmouseover(onmousemove)是光标移动到对象上发生，onmouseout则是光标离开对象发生。只需要给对应元素绑定事件就可以简单实现效果了。

<!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">
    <style>
        table {
            width: 750px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 16px;
        }
        thead {
            height: 30px;
            background-color: skyblue;
        }
        tbody tr {
            height: 30px;
            background-color: white;
        }
        tbody td {
            border-bottom: 1px solid #d7d7d7;
            font-size: 14px;
        }
        tbody tr>td:first-child {
            color: darkgray;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <table>
        <!-- 表头 -->
        <thead>
            <tr>
                <th>货币</th>
                <th>购汇</th>
                <th>售汇</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>美元</td>
                <td>675.7800</td>
                <td>678.3500</td>
            </tr>
            <tr>
                <td>欧元</td>
                <td>687.8500</td>
                <td>692.4800</td>
            </tr>
            <tr>
                <td>港币</td>
                <td>86.2400</td>
                <td>86.5500</td>
            </tr>
            <tr>
                <td>日元</td>
                <td>5.0782</td>
                <td>5.1123</td>
            </tr>
            <tr>
                <td>英镑</td>
                <td>815.3200</td>
                <td>820.8000</td>
            </tr>
            <tr>
                <td>澳元</td>
                <td>473.9100</td>
                <td>477.0900</td>
            </tr>
            <tr>
                <td>加元</td>
                <td>521.9000</td>
                <td>525.410</td>
            </tr>
        </tbody>
    </table>
    <script>
        //思路：鼠标移动在元素之上，某行高亮，离开元素恢复原来背景
        //获取元素,需要获取的是每行
        let cell = document.getElementsByTagName('tbody')[0].getElementsByTagName('tr')
        for (let i = 0; i < cell.length; i++) {
            cell[i].onmouseover = function () {//光标移动到元素上
                this.style.backgroundColor = 'pink'
            }
            cell[i].onmouseout = function () {
                this.style.backgroundColor = 'white'
            }
        }
    </script>
</body>
</html>

案例四:全选和取消全选

点击全选按钮，子按钮全部选中。
子按钮全部选中，全选按钮自动勾选

思路：子按钮的复选框的checked的属性（选中）跟随全选按钮，设置一个报警器，即子按钮全部勾选发出警告要勾选全选按钮。

        //第一步要分别获取全选按钮和子按钮
        let fbtn = document.getElementById('father_button')
        let cbtn = document.getElementById('child_button').getElementsByTagName('input')
        // console.log(fbtn)
        // console.log(cbtn)

        //第二步按照以上思路绑定事件
        fbtn.onclick = function () {
            // console.log(this.checked) 可以知道checked属性值为true或false
            for (let i = 0; i < cbtn.length; i++) {
                cbtn[i].checked = this.checked
            }
        }
        //警报器,全部子按钮勾选返回true
        function allSelect() {
            for (let i = 0; i < cbtn.length; i++) {
                if (cbtn[i].checked === false) return false
            }
            return true
        }
        for (let i = 0; i < cbtn.length; i++) {
            cbtn[i].onclick = function () {
                //检查
                if (allSelect()) {
                    fbtn.checked = true
                }
            }
        }

说明：father_button是全选按钮的id，child_button是tbody的id,子按钮都位于tbody。表格和样式比较简单，没有放出来。

案例五：tab栏切换布局

结构搭建：tab_head表头，content_box内容盒子用于存放对应内容。

核心思想：点击tab_head，显示对应content，默认表头第一列被选中。

实现：表头每个选项卡绑定点击事件，当事件触发，先清除所有人的样式，再设置自己。清除样式包括隐藏所有内容和清除底色，设置自己包括显示内容和添加底色。

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .tab_head {
            height: 40px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        .tab {
            margin: 100px auto;
            width: 752px;
        }

        li {
            list-style-type: none;
            float: left;
            line-height: 40px;
            text-align: center;
            cursor: pointer;
            width: 150px;
        }

        .show {
            /* 默认选中第一个 */
            background-color: rgb(199, 71, 77);
            color: #fff;
        }

        .item {
            display: none;
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab_head">
            <ul>
                <li class="show">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="content_box">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价（50000）模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>
        </div>
    </div>
    <script>
        //获取元素
        let lis = document.querySelectorAll('li')
        let contents = document.getElementsByClassName('item')//一次查询返回对象集合，是静态的，放心使用

        //绑定事件
        for (let i = 0; i < lis.length; i++) {
            lis[i].onclick = function () {
                for (let i = 0; i < lis.length; i++) {//清除样式
                    lis[i].className = ''
                    contents[i].style.display = 'none'//使用display而不使用visibility是因为display隐藏后不占用原来的位置
                }
                //设置自己
                this.setAttribute('class', 'show')
                // 注意有两个i，都是块级变量，第二个i在第二个for循环结束就被销毁了，这里的i是第一个i
                contents[i].style.display = 'block'
            }
        }
    </script>
</body>

</html>