Web APIs案例小合集

2024-03-14 22:09:11

​​​​​​

目录

1、排他思想

1.1 什么叫排他思想

1.2 案例展示 

1.3 代码实现 

2、案例：百度换肤

2.1 案例展示 

2.2 案例分析 

2.3 代码实现

3、表格隔行变色

3.1 案例展示  ​

3.2 案例分析 

2.3 代码实现

4、表单全选案例

4.1 案例展示  

4.2 案例分析 

4.3 代码实现

总结



1、排他思想

1.1 什么叫排他思想

首先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们称为排他思想。

如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：

1. 所有元素全部清除样式（干掉其他人）

2. 给当前元素设置样式 （留下我自己）

3. 注意顺序不能颠倒，首先干掉其他人，再设置自己

1.2 案例展示 

 Web APIs案例小合集

1.3 代码实现 

<!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>
</head>

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        //获取所有元素
        var btns = document.getElementsByTagName('button');
        //btns得到的是伪数组 里面的每个元素就是btns[i]
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                //(1)首先需要把所有的按钮背景颜色去掉
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                //(2)然后才让当前元素的背景颜色改变
                this.style.backgroundColor = 'pink';
            }
        }
        //首先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们称为排他思想
    </script>
</body>

</html>



2、案例：百度换肤

2.1 案例展示 

 Web APIs案例小合集

2.2 案例分析 

  1. 这个案例练习的是一组元素注册事件
  2. 给四个小图片用循环设置点击事件
  3. 我们点击了这个图片，让我们页面背景改为当前的图片
  4. 核心算法：把当前图片的src路径获取过来，给body做为背景

2.3 代码实现

<!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;
        }
        
        body {
            background: url(images/1.jpg) no-repeat center top;
        }
        
        li {
            list-style: none;
        }
        
        .baidu {
            overflow: hidden;
            margin: 100px 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
                //获取body document.body
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>
</body>

</html>

3、表格隔行变色

3.1 案例展示  Web APIs案例小合集

3.2 案例分析 

  1. 用到新的鼠标事件，鼠标经过onmouseover 鼠标离开onmouseout
  2. 核心思路：鼠标进过tr行，当前的行的背景颜色改变，鼠标离开去掉当前的背景颜色
  3. 注意：第一行的样式我们不需要去获取进行更改，我们获取的是tbody里面的内容

2.3 代码实现

<!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 {
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }
        
        thead tr {
            height: 30px;
            background-color: skyblue;
        }
        
        tbody tr {
            height: 30px;
        }
        
        tbody td {
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }
        
        .bg {
            background-color: pink;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
        </tbody>
    </table>
    <script>
        //获取的元素对象是tbody里面的行
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        //利用循环绑定注册事件
        for (var i = 0; i < trs.length; i++) {
            //鼠标经过事件 onm ouseover
            trs[i].onmouseover = function() {
                    this.className = 'bg';
                }
                //鼠标离开事件 onm ouseout
            trs[i].onmouseout = function() {
                this.className = '';
            }
        }
    </script>
</body>

</html>

4、表单全选案例

4.1 案例展示  

Web APIs案例小合集

4.2 案例分析 

  1. 全选和取消全选做法：让下面所有复选框的checked属性(选中状态) 跟随全选按钮即可
  2. 下面复选框需要全部选中，上面全选才能选中的做法：给下面所有复选框绑定点击事件，每次点击都要循环查看下面所有的复选框是否有没有选中，如果有一个没有选中的，上面全选就不选中
  3. 可以设置一个变量，来控制全选是否选中

4.3 代码实现

<!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>
        * {
            padding: 0;
            margin: 0;
        }
        
        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }
        
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }
        
        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
        
        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
        
        td {
            font: 14px "微软雅黑";
        }
        
        tbody tr {
            background-color: #f0f0f0;
        }
        
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
</head>

<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>iPad Pro</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Air</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>Apple Watch</td>
                    <td>2000</td>
                </tr>

            </tbody>
        </table>
    </div>
    <script>
        //1.全选和取消全选做法： 让下面所有复选框的CheckBox属性（选中状态） 跟随 全选按钮即可
        //获取元素
        var j_cbAll = document.getElementById('j_cbAll');
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
        //注册事件
        j_cbAll.onclick = function() {
                //this.checked 可以得到当前复选框的选中状态
                for (var i = 0; i < j_tbs.length; i++) {
                    j_tbs[i].checked = this.checked;
                }
            }
            //2.下面复选框需要全部选中，上面全选才能选中的做法，给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中，上面全选就不选中
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].onclick = function() {
                //3.可以设置一个变量，来控制全选是否选中
                var flag = true;
                //每次点击下面的复选框都要循环检查这四个按钮是否全被选中
                for (var i = 0; i < j_tbs.length; i++) {
                    if (!j_tbs[i].checked) {
                        flag = false;
                    }
                }
                j_cbAll.checked = flag;
            }
        }
    </script>
</body>

</html>



总结

今天小编的分享到现在就结束了！看在小编如此努力的份上，点个赞再走吧！

Web APIs案例小合集

上一篇：Web API


下一篇：Web APIs 简介