排他思想算法、百度换肤、全选\取消全选、

最新推荐文章于 2024-08-08 15:12:59 发布

Just-Lsy

最新推荐文章于 2024-08-08 15:12:59 发布

阅读量308

点赞数

分类专栏：笔记文章标签：算法百度 elementui

本文链接：https://blog.csdn.net/m0_59030524/article/details/122289540

版权

笔记专栏收录该内容

69 篇文章 6 订阅

订阅专栏

本文探讨了JavaScript中的排他思想算法在按钮交互中的应用，以及百度换肤功能的实现，通过实例展示了如何利用DOM操作改变页面样式。同时介绍了全选/取消全选功能的实现，结合前端开发的关键元素进行讲解。

摘要由CSDN通过智能技术生成

排他思想算法

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        // 1. 获取所以按钮元素
        var btns = document.getElementsByTagName('button');
        // btns得到的是伪数组，里面的每一个元素btns[i]
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function () {
                // (1)先把所有的按钮背景颜色去掉·
                for (var j = 0; j < btns.length; j++) {
                    btns[j].style.backgroundColor = '';
                }
                // （2）再让当前的背景颜色为粉色
                this.style.backgroundColor = 'pink';
            }
        }
    </script>
</body>

百度换肤

<style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: url(images/1.jpg) no-repeat center top;
        }

        li {
            list-style: none;
        }

        .baidu {
            overflow: hidden;
            margin: 200px auto;
            background-color: #fff;
            width: 410px;
            padding-top: 3px;
        }

        .baidu li {
            float: left;
            margin: 0 1px;
            cursor: pointer;
        }

        .baidu img {
            width: 100px;
        }
    </style>
</head>

<body>
    <ul class="baidu">
        <li><img src="images/1.jpg" alt=""></li>
        <li><img src="images/2.jpg" alt=""></li>
        <li><img src="images/3.jpg" alt=""></li>
        <li><img src="images/4.jpg" alt=""></li>

    </ul>
    <script>
        var imgs = document.querySelector('.baidu').querySelectorAll('img');
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function () {
                // this.src就是我们点击图片的路径
                // 把这个路径this.src给body就可以了
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>
</body>

全选取消全选案例：

<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th><input type="checkbox" id='j_cbAll'></th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>iphone8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>iphone8</td>
                    <td>8000</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        var j_cbAll = document.getElementById('j_cbAll');  //全选按钮
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');  //下面所有的复选框
        j_cbAll.onclick = function () {
            // this.checked可以得到当前复选框的选中状态，为true则选中，否则不选中
            for (var i = 0; i < j_tbs.length; i++) {
                j_tbs[i].checked = this.checked;
            }
        }
        // 下面复选框需要全选中，上面全选才能选中：给下面所有复选框绑定点击事件，每次点击，都要循环一次看复选框有没有被选中
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].onclick = function () {
                for (var i = 0; i < j_tbs.length; i++) {   //为j不行
                //用if.else
                //     if (!j_tbs[i].checked) {
                //         j_cbAll.checked = false;
                //     } else {
                //         j_cbAll.checked = true;
                //     }
                // }
                //声明一个布尔变量
                var flag = true;
                for (var i = 0; i < j_tbs.length; i++) {   //为j不行
                    if (!j_tbs[i].checked) {
                        flag = false;
                        break; 
                //退出for循环，可以提高执行效率，只要有一个没被选中，剩下的无需再循环碰到李             
                    }
                }
                j_cbAll.checked = flag;
            }
        }
    </script>
</body>

Just-Lsy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
排他思想算法、百度换肤、全选\取消全选、

排他思想算法<body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> <script> // 1. 获取所以按钮元素 .
复制链接

扫一扫