0
点赞
收藏
分享

微信扫一扫

你知道 javascript 中的排他思想吗？这些前端案例看似很简单（内附动图）

凉夜lrs 2022-03-20 阅读 53
javascript前端开发语言

📋 个人简介

  • 💖 作者简介：大家好，我是阿牛，全栈领域新星创作者。😜
  • 📝 个人主页：馆主阿牛🔥
  • 🎉 支持我：点赞👍+收藏⭐️+留言📝
  • 📣 系列专栏：硬泡 javascript🍁
  • 💬格言：迄今所有人生都大写着失败，但不妨碍我继续向前！🔥
    请添加图片描述

目录

🐟前言

在学习前端js操作元素的时候，往往有很多的案例的做法的思想都是一样的，我们一定要会。本篇文章将从几个小demo入手，带你领略js的风采。
很常见的一些案例，一定要学会哦！！！

🐋排他思想（算法）

一句话总结排他思想：

因为有些案例需要用到排他思想小算法，因此在写案例之前我简单地说一下排他思想是什么。这在我们前端开发中很常见，用处很广，所以你一定要掌握哦！

🐬案例-点击按钮变色

🍂🍂🍂1.代码🍂🍂🍂

<!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>
        button{
            border-radius: 10%;
            background-color:skyblue;
        }
    </style>
</head>
<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
    //排他思想
        var btn = document.querySelectorAll('button');
        for (var i=0;i<btn.length;i++){
            // 为每一个按钮注册事件
            btn[i].onclick = function(){
                //点击后添加背景色之前，清除之前以点击过的样式（干掉所有人）
                for (var i=0;i<btn.length;i++){
                    btn[i].style.backgroundColor = '';
                }
                // 留下我自己
                this.style.backgroundColor = 'pink';
            }
        }
    </script>
</body>
</html>

🍃🍃🍃2.动图演示🍃🍃🍃

🐋案例-换肤效果

循环注册事件就行，用不到排他思想
🍂🍂🍂1.代码🍂🍂🍂

<!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;
        }
        li{
            list-style: none;
        }
        body{
            background:url('img/201.jpg') no-repeat;
            background-size: cover;
        }
        .box{
            overflow: hidden; /*清除浮动*/
            width: 410px;
            background-color: #fff;
            margin-top: 100px;
            margin-left: 70%;
            padding:3px 0;
        }
        .box li{
            float:left;
            width: 100px;   
            margin: 0 1px;   
        }
        img{
            width: 100%;
            vertical-align: bottom; /*li盒子是图片按比例撑高的，图片和盒子下边默认是基线对齐，有间隙*/
        }
    </style>
</head>
<body>
    <ul class="box">
        <li><img src="img/201.jpg" alt=""></li>
        <li><img src="img/202.jpg" alt=""></li>
        <li><img src="img/203.jpg" alt=""></li>
        <li><img src="img/204.jpg" alt=""></li>
    </ul>
    <script>
        // js实现换肤效果 循环注册事件就行，用不到排他思想
        var imgs = document.getElementsByClassName('box')[0].getElementsByTagName('img');
        for (var i=0;i<imgs.length;i++){
            imgs[i].onclick = function(){
                arr = this.src.split('/');
                imgUrl = arr[5] + '/' + arr[6]; //切割链接为  img/***.jpg
                document.body.style.backgroundImage = 'url(' + imgUrl + ')';
            }
        }
    </script>
</body>
</html>

🍃🍃🍃2.动图演示🍃🍃🍃
请添加图片描述

🐋案例-表格隔行变色

循环注册事件就行，用不到排他思想
🍂🍂🍂1.代码🍂🍂🍂

<!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{
            border: 1px solid #999;
            border-collapse: collapse;
            text-align: center;
            margin: 0 auto;
        }
        th,td{
            border-bottom: 1px solid #999;
            padding: 5px;
        }
        .bg{
            background-color: #87ceeb8c;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr class="bg">
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>0001</td>
                <td>公司1</td>
                <td>1075</td>
                <td>1086</td>
                <td>1023</td>
            </tr>
            <tr>
                <td>0002</td>
                <td>公司2</td>
                <td>1075</td>
                <td>1086</td>
                <td>1023</td>
            </tr>
            <tr>
                <td>0003</td>
                <td>公司3</td>
                <td>1075</td>
                <td>1086</td>
                <td>1023</td>
            </tr>
            <tr>
                <td>0004</td>
                <td>公司4</td>
                <td>1075</td>
                <td>1086</td>
                <td>1023</td>
            </tr>
        </tbody>
    <table>
    <script>
        //表格隔行变色
        var trs = document.querySelector('tbody').getElementsByTagName('tr');
        for (var i=0;i<trs.length;i++){
            trs[i].onmouseover = function(){
                this.className = 'bg';
            }
            trs[i].onmouseout = function(){
                this.className = '';
            }
        }
    </script>
</body>
</html>

🍃🍃🍃2.动图演示🍃🍃🍃
请添加图片描述

🐋案例-表单全选与取消全选（重要）

循环注册事件就行，用不到排他思想
🍂🍂🍂1.代码🍂🍂🍂

<!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{
           border-collapse: collapse;
           text-align: center;
           margin: 100px auto;
           border: 1px solid #999;
       }
       thead th{
           background-color: #87ceeb8c;
       }
       th,td{
           border: 1px solid #999;
           padding: 0 10px;
       }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" id="chAll"></th>
                <th>商品</th>
                <th>价钱</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>李宁衣服</td>
                <td>500</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>汇源果汁</td>
                <td>5</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>鸿星尔克鞋子</td>
                <td>150</td>
            </tr>
        </tbody>
    </table>
    <script>
        //表单全选,取消全选 循环让下面的checked属性跟随总复选框即可
        var chAll = document.getElementById('chAll');
        var tdIpts = document.querySelector('tbody').getElementsByTagName('input');
        // 为总复选框注册事件
        chAll.onclick = function(){
            // console.log(this.checked);  // true/false
            for (var i=0;i<tdIpts.length;i++){
                tdIpts[i].checked = this.checked;
            }
        }

        //为下面的小复选框框注册事件，当全部选中时，总复选框也选中，当其中有一个么选中时，复选框取消选中
        for (var i=0;i<tdIpts.length;i++){
            tdIpts[i].onclick = function(){
               var flag = true; // flag控制全选按钮是否选中
               //检查所有的小复选框的选中状态 
                for (var i=0;i<tdIpts.length;i++){
                   if(!tdIpts[i].checked){  // 如果有一个么有选中，flag=false,且break退出
                        flag = false;
                        break;
                    }
                }
                chAll.checked = flag;
            }
        }
    </script>
</body>
</html>

🍃🍃🍃2.动图演示🍃🍃🍃
请添加图片描述

🐟结语

这几个小demo是不是十分有用，关注我！带来更多精彩💚💚💚
陆陆续续写了很多前端基础知识和小demo了，这些对初学者都很有用，我把他们都放在我的专栏里了，精心打造了软磨硬泡系列，一起来学习吧！💦💦

在这里插入图片描述

举报

相关推荐

你知道开源框架怎么实现运维编排吗？其实很简单

日记本

JavaScript中的totoLocaleString()方法你知道吗？

javascript前端js开发语言es6/es7

Facebook的这些推广技巧你知道吗？

facebook

这些 function 的细节你都知道吗？

javascript前端typescript函数调用数组虚拟化云计算

你知道JavaScript中的Web Worker和Blob吗？

JavaScript知识点深究JavaS...JavaScr...编程语言爱好者

这些VCP证书的隐藏价值，你知道吗？

VMware虚拟化IT考试认证

【Vue】el & data的这些细节你知道吗

Vue函数式对象式Java后端开发yyds干货盘点

【面试题】JS 中这些继承方式你知道吗？

javascript开发语言ecmascript父类继承方式编程语言

DevEco Studio的这些预览能力你都知道吗？

开发者终端设备代码块编程语言

天天写SQL，这些神奇的特性你知道吗？

sql数据库聚合查询SQL 语句高斯数据库SQL Server
0 条评论