其他分享
首页 > 其他分享> > Web APIs案例小合集

Web APIs案例小合集

作者：互联网

​​​​​​

目录

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 案例展示 

 

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 案例展示 

 

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 案例展示  

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 案例展示  

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,color,复选框,案例,全选,选中,var,合集
来源： https://blog.csdn.net/chnnds/article/details/121840475