WebAPIs-02:（常用经典案例分享）

最新推荐文章于 2023-04-06 08:23:52 发布
最新推荐文章于 2023-04-06 08:23:52 发布
阅读量675 收藏
点赞数 2
分类专栏： WebApis JavaScript 基础篇 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FellAsleep/article/details/121903542
版权
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;
        box-sizing: border-box;
      }

      ul {
        list-style: none;
      }

      .mi {
        position: relative;
        width: 223px;
        margin: 100px auto;
      }

      .mi input {
        width: 223px;
        height: 48px;
        padding: 0 10px;
        font-size: 14px;
        line-height: 48px;
        border: 1px solid #e0e0e0;
        outline: none;
        transition: all 0.3s;
      }

      .mi .search {
        border: 1px solid #ff6700;
      }

      .result-list {
        display: none;
        position: absolute;
        left: 0;
        top: 48px;
        width: 223px;
        border: 1px solid #ff6700;
        border-top: 0;
        background: #fff;
      }

      .result-list a {
        display: block;
        padding: 6px 15px;
        font-size: 12px;
        color: #424242;
        text-decoration: none;
      }

      .result-list a:hover {
        background-color: #eee;
      }
    </style>
  </head>

  <body>
    <div class="mi">
      <input type="search" placeholder="小米笔记本" />
      <ul class="result-list">
        <li><a href="#">全部商品</a></li>
        <li><a href="#">小米11</a></li>
        <li><a href="#">小米10S</a></li>
        <li><a href="#">小米笔记本</a></li>
        <li><a href="#">小米手机</a></li>
        <li><a href="#">黑鲨4</a></li>
        <li><a href="#">空调</a></li>
      </ul>
    </div>

    <script>
      /* 学习目标： 输入框焦点事件
          1.  onfocus : 成为焦点。 点击输入框出现光标，此时输入可以输入
          2.  onblur  : 失去焦点。 点击页面其他区域光标消失，此时输入框不可以输入

      小米搜索框思路
        (1)输入框成为焦点： 显示ul列表， 输入框添加自身边框
        (2)输入框失去焦点： 隐藏ul列表，  输入框移除自身边框
      */

      //1.获取元素
      let input = document.querySelector('input')
      let ul = document.querySelector('.result-list')

      //2.注册事件
      //2.1 成为焦点
      input.onfocus = function () {
        //this :  事件源 input
        console.log('1-你点击我了，光标出现，此时可以输入内容了')
        //3. 输入框成为焦点： 显示ul列表， 输入框添加自身边框
        //(1)显示ul
        ul.style.display = 'block'
        //(2)自身添加边框   元素.classList.add('类名')
        this.classList.add('search')
      }

      //2.2 失去焦点
      input.onblur = function () {
        console.log('2-你点击了其他区域，我的光标消失了，此时不可以输入内容')
        //输入框失去焦点： 隐藏ul列表，  输入框移除自身边框
        //(1)隐藏ul
        ul.style.display = 'none'
        //(2)自身移除边框   元素.classList.remove('类名')
        this.classList.remove('search')
      }
    </script>
  </body>
</html>
2.购物车+ -案例:

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      div {
        width: 80px;
      }

      input[type='text'] {
        width: 50px;
        height: 44px;
        outline: none;
        border: 1px solid #ccc;
        text-align: center;
        border-right: 0;
      }

      input[type='button'] {
        height: 24px;
        width: 22px;
        cursor: pointer;
      }

      input {
        float: left;
        border: 1px solid #ccc;
      }
    </style>
  </head>

  <body>
    <div>
      <input type="text" id="total" value="1" readonly />
      <input type="button" value="+" id="add" />
      <input type="button" value="-" id="reduce" />

      <script>
        /* 分析思路：交互
        1.点击+号按钮： 输入框内容数量  自身+1
        2.点击-号按钮： (1)输入框内容数量  自身-1  (2)当数量为0的时候，禁用-号按钮
        */

        //1.获取元素
        let add = document.querySelector('#add')
        let reduce = document.querySelector('#reduce')
        let total = document.querySelector('#total')

        //2.注册事件
        //2.1 +号点击
        add.onclick = function () {
          //3.输入框内容数量  自身+1
          total.value++ //total.value = total.value + 1
          //细节： 只要点击了+号， 此时-号无条件可以点击
          reduce.disabled = false
        }

        //2.2 -号点击
        reduce.onclick = function () {
          //this : reduce按钮
          //3.1 输入框内容数量  自身-1
          total.value--
          //3.2 当数量为0的时候，禁用-号按钮
          console.log(total.value)//字符串类型数字
          if (total.value == 0) {
            //禁用-号按钮
            this.disabled = true
          }
        }
      </script>
    </div>
  </body>
</html>
3.图片切换案例

图片切换核心思路:

  • 1.数组存储图标路径(左右切换)
  • 2.使用变量存储下标 let index = 0 ; index++ index–

在这里插入图片描述

代码实现:

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .title {
        background-color: skyblue;
        color: white;
      }

      img {
        width: 200px;
        height: 200px;
        box-shadow: 0 0 20px hotpink;
      }
    </style>
  </head>

  <body>
    <h2 class="title">图片切换</h2>
    <img alt="" src="./images/01.jpg" />
    <br />
    <input id="prev" type="button" value="上一张" />
    <input id="next" type="button" value="下一张" />
    <script>
      /* 思路分析：交互
        *** 图片无限切换核心思路： 全局变量index记录当前图片下标
        1.点击下一张 : 修改img标签的src属性  (1)index++ 
        2.点击上一张 : 修改img标签的src属性  (1)index--
      */

      let arr = [
        './images/01.jpg',
        './images/02.jpg',
        './images/03.jpg',
        './images/04.jpg',
        './images/05.jpg'
      ]

      //*** 0.声明全局变量记录当前图片下标
      let index = 0

      //1.获取元素
      let prev = document.querySelector('#prev')
      let next = document.querySelector('#next')
      let img = document.querySelector('img')

      //2.注册事件
      //2.1 下一页
      next.onclick = function () {
        //3.1 无限切换： 如果当前下标是最后一张，则变成0 。 否则 index++
        if (index == arr.length - 1) {
          index = 0
        } else {
          index++
        }
        console.log(index)
        //3.2 修改img标签的src属性
        img.src = arr[index]
      }

      //2.2 上一页
      prev.onclick = function () {
        //3.1 无限切换上一页： 如果当前下标是0,则变成最后一张下标。 否则 index--
        if (index == 0) {
          index = arr.length - 1
        } else {
          index--
        }
        console.log(index)

        //3.2 修改img标签的src属性
        img.src = arr[index]
      }
    </script>
  </body>
</html>
4.输入框文字变化案例:

在这里插入图片描述

代码实现:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .userCount {
        color: red;
      }
    </style>
  </head>

  <body>
    <div class="controls">
      <textarea
        placeholder="说点什么吧..."
        id="area"
        cols="30"
        rows="10"
        maxlength="200"
      ></textarea>
      <div>
        <span class="userCount">0</span>
        <span>/</span>
        <span>200</span>
      </div>
    </div>
    <script>
      /* 需求分析
        文本框输入事件 ： 获取输入框文本长度，赋值给span标签
            输入事件： oninput    输入框输入内容了就会触发
        */

      //1.获取元素
      let area = document.querySelector('#area')
      let userCount = document.querySelector('.userCount')
      //2.注册事件
      area.oninput = function () {
        // console.log('用户输入了内容')
        // this : 事件源area
        // 获取文本
        // console.log(this.value)
        // 获取文本长度
        // console.log(this.value.length)

        //3.事件处理 获取输入框文本长度，赋值给span标签
        /* 
        innerText : 操作普通元素的文本
        value : 操作表单的输入框文本
        */
         userCount.innerText = this.value.length
      }
    </script>
  </body>
</html>
5.排他思想按钮案例:

在这里插入图片描述代码实现:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>

    <script>
      /* 思路分析：点击每一个按钮 ： 排他思想修改样式（我自己样式改变，其他人样式恢复默认）  */

      //1.获取元素
      let buttonList = document.querySelectorAll('button')
      console.log(buttonList) //伪数组
      //2.注册事件
      //五个按钮都要注册事件，使用循环语句
      for (let i = 0; i < buttonList.length; i++) {
        //i = 0 1 2 3 4
        //注册点击事件
        buttonList[i].onclick = function () {
          //3.事件处理
          console.log(this) //事件源： 当前点击的按钮
          /* 排他思想： 排除他人，复活自己*/
          //排除他们
          for(let j = 0;j<buttonList.length;j++){
            buttonList[j].style.backgroundColor = ''
          }
          //复活自己
          this.style.backgroundColor = 'pink'
        }
      }
        // 个人理解：
  /*
    外层循环：是为每一个按钮注册事件,增加样式（2）复活自己

    里层循环：是得到每一个按钮的样式,并取消 （1）干掉所有兄弟样式

    不是双重for循环 外层循环与里层循环 没有任何关系
  */
    </script>
  </body>
</html>
5.1排他思想升级:

代码实现:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <style>
    .pink {
      background-color: pink;
    }
  </style>
</head>

<body>
  <button class="pink">按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
  <button>按钮5</button>
</body>

<script>
  // 1.获取元素
  let buttonList = document.querySelectorAll('button')

  // 2.注册事件 得到每一个button 点击
  for (let i = 0; i < buttonList.length; i++) {
    buttonList[i].onclick = function () {
      // 3.事件处理: 点击的时候 去除包含pink的样式 ('选择器') 类选择器.pink   属性选择器 [class="pink"]  交集选择器button.pink ....
      document.querySelector('[class="pink"]').classList.remove('pink')
      // 属性.classList.remove('类名')
      // 为自己添加 类名为pink的样式
      this.classList.add('pink')

    }
  }
</script>






</html>
6.突出展示案例:

在这里插入图片描述
代码实现:

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }

      ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      body {
        background: #000;
      }

      .wrap {
        margin: 100px auto 0;
        width: 630px;
        height: 394px;
        padding: 5px;
        background: #000;
        overflow: hidden;
        border: 1px solid #fff;
      }

      .wrap li {
        float: left;
        padding: 5px;
      }

      .wrap img {
        display: block;
        border: 0;
      }
    </style>
  </head>

  <body>
    <div class="wrap">
      <ul>
        <li>
          <a href="#"><img src="images/01.jpg" alt=""/></a>
        </li>
        <li>
          <a href="#"><img src="images/02.jpg" alt=""/></a>
        </li>
        <li>
          <a href="#"><img src="images/03.jpg" alt=""/></a>
        </li>
        <li>
          <a href="#"><img src="images/04.jpg" alt=""/></a>
        </li>
        <li>
          <a href="#"><img src="images/05.jpg" alt=""/></a>
        </li>
        <li>
          <a href="#"><img src="images/06.jpg" alt=""/></a>
        </li>
      </ul>

      <script>
        /* 思路分析： 鼠标移入每一个li元素： 排他思想修改opacity
          1.注册事件：鼠标移入每一个li元素（需要使用循环）
          2. 排他思想修改opacity : 需要循环
            * 移入的元素： 1
            * 其他兄弟： 0.5
        */

        //1.获取元素
        let liList = document.querySelectorAll('.wrap li')
        //2.循环遍历数组给每一个li元素注册事件
        for (let i = 0; i < liList.length; i++) {
          //鼠标移入事件
          liList[i].onmouseenter = function () {
            //3.排他思想修改样式
            //排除他人
            for (let j = 0; j < liList.length; j++) {
                liList[j].style.opacity = 0.5
            }
            //复活自己
            this.style.opacity = 1
          }         
        }
      </script>
    </div>
  </body>
</html>
6.1突出展示案例:

在这里插入图片描述

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8" />
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    body {
      background: #000;
    }

    .wrap {
      margin: 100px auto 0;
      width: 630px;
      height: 394px;
      padding: 5px;
      background: #000;
      overflow: hidden;
      border: 1px solid #fff;
    }

    .wrap li {
      float: left;
      padding: 5px;

    }

    .wrap img {
      display: block;
      border: 0;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <ul>
      <li>
        <a href="#"><img src="images/01.jpg" alt="" /></a>
      </li>
      <li>
        <a href="#"><img src="images/02.jpg" alt="" /></a>
      </li>
      <li>
        <a href="#"><img src="images/03.jpg" alt="" /></a>
      </li>
      <li>
        <a href="#"><img src="images/04.jpg" alt="" /></a>
      </li>
      <li>
        <a href="#"><img src="images/05.jpg" alt="" /></a>
      </li>
      <li>
        <a href="#"><img src="images/06.jpg" alt="" /></a>
      </li>
    </ul>
  </div>

  <script>
    // 1.获取元素 
    let liList = document.querySelectorAll('.wrap li')
    // 伪数组
    /*     
        for (let i = 0; i < liList.length; i++) {
          // 2.注册事件  鼠标移入liList
          liList[i].onmouseenter = function () {
            // 事件处理
            liList[i].style.backgroundColor = 'red'
            // console.log('ceshi')
            liList[i].style.opacity = '0.5'
          }
          // 鼠标移出
          liList[i].onmouseleave = function () {
            liList[i].style.opacity = '1'
          }
        } 
    */
    // ----得到每个li
    for (let i = 0; i < liList.length; i++) {
      // 2.注册事件 鼠标移入
      liList[i].onmouseenter = function () {
        // 3.事件处理 背景半透明
        liList[i].style.opacity = '0.5'
        //----再次得到每个li
        for (let j = 0; j < liList.length; j++) {
          // 注册事件 鼠标离开
          liList[i].onmouseleave = function () {
            //4.事件处理 背景显示
            liList[i].style.opacity = ''
          }
        }
      }
    }
  </script>
</body>
</html>

这个也是可以实现的:
在这里插入图片描述
不过需要单独在style里设置一个样式,用于classList.toggle(‘类名’) 切换样式

    <script>

        // 1.思路 首先需要单数设置一个CSS样式 方便用切换  元素.classList.toggle('类名') liList[i].classList.toggle('opacity')
        // 2.获取元素   遍历得到每一个li ...liList  .... querySelectorAll('选择器')  返回伪数组
        // 3.事件注册   鼠标移入/移出时 2个事件   liList[i].onmouseenter /  liList[i].onmouseleave
        // 4.事件处理   li的背景颜色发生改变  第一步有设置样式了  在事件里切换即可 liList[i].classList.toggle('opacity')

        // 1.获取元素
        let liList = document.querySelectorAll('.wrap li')

        //遍历 得到每个li
        for (let i = 0; i < liList.length; i++) {
            // 2.事件注册 鼠标移入
            liList[i].onmouseenter = function () {
                // 3.事件处理
                liList[i].classList.toggle('opacity')//切换样式  类名有则移除 无则添加
            }
            liList[i].onmouseleave = function () {
                liList[i].classList.toggle('opacity')//切换样式  类名有则移除 无则添加
            }
        }
    </script>
7.全选/反选/全不选案例:

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input class='check' type="checkbox">
    <input class='check' type="checkbox">
    <input class='check' type="checkbox">
    <input class='check' type="checkbox">
    <input class='check' type="checkbox">

    <input id="checkAll" type="button" value="全选">
    <input id="unCheckAll" type="button" value="全不">
    <input id="reverseCheck" type="button" value="反选">

    <script>
        /* 
        1.全选   : 设置选择框列表的 checked属性为true
        2.全不选 : 设置选择框列表的 checked属性为false
        3.反选   : 设置选择框列表的 checked与自身相反（ true变false， false变true ）
        */

        //1.获取元素
        let checkAll = document.querySelector('#checkAll')
        let unCheckAll = document.querySelector('#unCheckAll')
        let reverseCheck = document.querySelector('#reverseCheck')
        let checkList = document.querySelectorAll('.check')//选择框列表
        //2.1 全选
        checkAll.onclick = function () {
            for (let i = 0; i < checkList.length; i++) {
                checkList[i].checked = true
            }
        }
        //2.2 全不选
        unCheckAll.onclick = function () {
            for (let i = 0; i < checkList.length; i++) {
                checkList[i].checked = false
            }
        }
        //2.3 反选
        reverseCheck.onclick = function () {
            for (let i = 0; i < checkList.length; i++) {
                //如果checked是true，就要变成false。 否则false就要变成true
                // if( checkList[i].checked ){
                //     checkList[i].checked = false
                // }else{
                //     checkList[i].checked = true
                // }

                /* 表达式 ? 代码1 : 代码2 */
                // checkList[i].checked =  checkList[i].checked ? false : true

                //逻辑非  true变false  false变true
                checkList[i].checked = !checkList[i].checked
            }
        }

    </script>
</body>

</html>
8.全选反选框升级:

在这里插入图片描述

代码实现1:求和思想

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      table {
        border-collapse: collapse;
        border: 1px solid #c0c0c0;
        width: 500px;
        margin: 100px auto;
        text-align: center;
      }

      th {
        background-color: #09c;
        font: bold 16px '微软雅黑';
        color: #fff;
        height: 24px;
      }

      td {
        border: 1px solid #d0d0d0;
        color: #404060;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th><input type="checkbox" id="checkAll" />全选/全不选</th>
        <th>菜名</th>
        <th>商家</th>
        <th>价格</th>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="check" />
        </td>
        <td>红烧肉</td>
        <td>隆江猪脚饭</td>
        <td>￥200</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="check" />
        </td>
        <td>香酥排骨</td>
        <td>隆江猪脚饭</td>
        <td>￥998</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="check" />
        </td>
        <td>北京烤鸭</td>
        <td>隆江猪脚饭</td>
        <td>￥88</td>
      </tr>
    </table>
    <script>
      /* 思路分析
      1.点击全选/全不选 ：  选择框列表的checked值与自身一致
      2.点击下方每一个选择框 ： 判断上方选择框的checked值是true还是false
        true : 全部都选中
        false: 只要有一个没有选中
      */


      //1.获取元素
      let checkAll = document.querySelector('#checkAll')
      let checkList = document.querySelectorAll('.check')

      //2.1 点击全选
      checkAll.onclick = function(){
          //选择框列表的checked值与自身一致
          // console.log( this )//自身，指向事件源
          for(let i = 0;i<checkList.length;i++){
            checkList[i].checked = this.checked
          }   
      }

      //2.2 下方选择框列表
      for(let i = 0;i<checkList.length;i++){
        checkList[i].onclick = function(){
          /*3.事件处理：判断是否全部选中 
              true:全部选中
              false:没有全部选中
          累加思想 ： 求选中数量的累加和， 判断和选择框总数 是否一致
          */
          let sum = 0
          for(let j = 0;j<checkList.length;j++){
            if( checkList[j].checked ){
              sum++
            }
          }
          console.log( sum )
          //判断选中的数量 和 选择框数量是否一致
          // if( sum == checkList.length ){
          //   checkAll.checked = true
          // }else{
          //   checkAll.checked = false
          // }
          
          checkAll.checked = (sum == checkList.length)
        }
      }
    </script>
  </body>
</html>

代码实现2:开关思想

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      table {
        border-collapse: collapse;
        border: 1px solid #c0c0c0;
        width: 500px;
        margin: 100px auto;
        text-align: center;
      }

      th {
        background-color: #09c;
        font: bold 16px '微软雅黑';
        color: #fff;
        height: 24px;
      }

      td {
        border: 1px solid #d0d0d0;
        color: #404060;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th><input type="checkbox" id="checkAll" />全选/全不选</th>
        <th>菜名</th>
        <th>商家</th>
        <th>价格</th>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="check" />
        </td>
        <td>红烧肉</td>
        <td>隆江猪脚饭</td>
        <td>￥200</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="check" />
        </td>
        <td>香酥排骨</td>
        <td>隆江猪脚饭</td>
        <td>￥998</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="check" />
        </td>
        <td>北京烤鸭</td>
        <td>隆江猪脚饭</td>
        <td>￥88</td>
      </tr>
    </table>
    <script>
      /* 思路分析
      1.点击全选/全不选 ：  选择框列表的checked值与自身一致
      2.点击下方每一个选择框 ： 判断上方选择框的checked值是true还是false
        true : 全部都选中
        false: 只要有一个没有选中
      */


      //1.获取元素
      let checkAll = document.querySelector('#checkAll')
      let checkList = document.querySelectorAll('.check')

      //2.1 点击全选
      checkAll.onclick = function(){
          //选择框列表的checked值与自身一致
          // console.log( this )//自身，指向事件源
          for(let i = 0;i<checkList.length;i++){
            checkList[i].checked = this.checked
          }   
      }

      //2.2 下方选择框列表
      for(let i = 0;i<checkList.length;i++){
        checkList[i].onclick = function(){
          /*3.事件处理：判断是否全部选中 
              true:全部选中
              false:没有全部选中
          开关思想：
            (1)声明布尔类型开关   let flag = true
            (2)遍历选择框列表，只要有选择框没有选中。开关就要改成false
            (3)循环结束后， 开关flag的值就是全选框的checked值
          */
          let flag = true
          for(let j = 0;j<checkList.length;j++){
              if( !checkList[j].checked ){
                  flag = false
                  break//只要发现没有选中的，后面没有必要查看的
              }
          }
          checkAll.checked = flag
        }
      }

      //实际开发中，布尔类型作为条件判断是直接使用的
      let bol = true
      //判断bol是不是true
      if( bol ){
        console.log('是true')
      }
      let bo = false
      //判断bo是不是false
      if( !bo ){// 只有当bo是false的时候， 取反才会得到true(小括号条件成立)
        console.log('是false');
      }
      
    </script>
  </body>
</html>
9.tab栏切换:

在这里插入图片描述

代码实现:
排他思想1: (1)循环干掉其他兄弟 ， (2)复活我自己
顺序不能错

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>tab栏切换</title>
    <style>
      .Box {
        width: 240px;
        border: 1px solid #000;
        margin: 100px auto;
        padding: 20px;
      }

      .con {
        width: 100%;
        height: 200px;
        background-color: #cccccc;
        border: 1px solid #000;
        margin-top: 10px;
        display: none;
      }

      .current {
        background-color: pink;
        border: 2px black solid;
      }

      .active {
        display:block; 
      }
    </style>
  </head>

  <body>
    <div class="Box" id="box">
      <button>按钮1</button>
      <button>按钮2</button>
      <button>按钮3</button>
      <button>按钮4</button>
      <div class="con" style="display:block">内容1</div>
      <div class="con">内容2</div>
      <div class="con">内容3</div>
      <div class="con">内容4</div>
    </div>

    <script>
      /* 思路分析
      点击上方按钮 ： 排他思想  (1)修改按钮样式 (2)显示对应下标盒子
      */

      //1.获取元素
      let buttonList = document.querySelectorAll('#box>button')
      let conList = document.querySelectorAll('#box>.con')

      //2.循环上面按钮注册点击事件
      for(let i = 0;i<buttonList.length;i++){
        buttonList[i].onclick = function(){
          //3.万能排他思想

          //3.1 先干掉所有兄弟
          for(let j = 0;j<buttonList.length;j++){//j = 0 1 2 3
            buttonList[j].style.backgroundColor = ''
            conList[j].style.display = 'none'
          }

          //3.2 复活我自己 和 下面下标一致兄弟
          buttonList[i].style.backgroundColor = 'pink'
          conList[i].style.display = 'block'
        }
      };
    </script>
  </body>
</html>

排他思想升级版:
在这里插入图片描述

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      ul {
        list-style: none;
      }
      .wrapper {
        width: 1000px;
        height: 475px;
        margin: 0 auto;
        margin-top: 100px;
      }
      .tab {
        border: 1px solid #ddd;
        border-bottom: 0;
        height: 36px;
        width: 320px;
      }
      .tab li {
        position: relative;
        float: left;
        width: 80px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        cursor: pointer;
        border-top: 4px solid #fff;
      }
      .tab span {
        position: absolute;
        right: 0;
        top: 10px;
        background: #ddd;
        width: 1px;
        height: 14px;
        overflow: hidden;
      }
      .products {
        width: 1002px;
        border: 1px solid #ddd;
        height: 476px;
      }
      .products .main {
        float: left;
        display: none;
      }
      .products .main.selected {
        display: block;
      }
      .tab li.active {
        border-color: red;
        border-bottom: 0;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <ul class="tab">
        <li class="tab-item active">国际大牌<span>◆</span></li>
        <li class="tab-item">国妆名牌<span>◆</span></li>
        <li class="tab-item">清洁用品<span>◆</span></li>
        <li class="tab-item">男士精品</li>
      </ul>
      <div class="products">
        <div class="main selected">
          <a href="###"><img src="images/guojidapai.jpg" alt=""/></a>
        </div>
        <div class="main">
          <a href="###"><img src="images/guozhuangmingpin.jpg" alt=""/></a>
        </div>
        <div class="main">
          <a href="###"><img src="images/qingjieyongpin.jpg" alt=""/></a>
        </div>
        <div class="main">
          <a href="###"><img src="images/nanshijingpin.jpg" alt=""/></a>
        </div>
      </div>
    </div>

    <script>
      /* 点击上方列表： 排他思想修改样式
        1. 万能排他 ：  (1)先干掉所有兄弟  (2)复活自己
        2. 升级排他 :   (1)先干掉上一次选中的兄弟  (2)复活自己
      */

      //1.获取元素
      let liList = document.querySelectorAll('.tab>li')// 选中类名  active
      let mainList = document.querySelectorAll('.products>.main')// 选中类名 selected

      //2.循环注册事件
      for(let i = 0;i<liList.length;i++){
        liList[i].onclick = function(){
          //3.升级版排他

          //3.1 先干掉上一次选中的兄弟
          document.querySelector('li.active').classList.remove('active')
          document.querySelector('.main.selected').classList.remove('selected')
          //3.2 复活自己 + 对应兄弟
          liList[i].classList.add('active')
          mainList[i].classList.add('selected')

        }
      }
    </script>

  </body>
</html>
A-sleep
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WebAPI编写案例
04-20
WebAPI编写案例，代码全面详细，易用性强，对于初学者很有帮助
webapi案例
09-19
简单webapi案例分享，对于初识webapi或者想学写webapi的程序员可以下载看看 此api采用mvc模式
WebApi的创建和简单实现（一）
热门推荐
沈夕林的博客
06-03 4万+
WebApi 1.what? 答: 对接各种客户端（浏览器，移动设备），构建http服务的框架 2.where? 答:部署在IIS中给外部应用提供数据 3.why? 答:C#MVC完美支持实现简单,明了,可控制 一、创建WebApi 1、开发环境：vs2019. 2、然后点击下一步 3、点击创建 4、然后再点击创建就会进入新建项目，然后再MVC（Models，Views，Controller...
WebAPI（案例）
weixin_60007218的博客
04-05 301
WebAPI相关案例
JavaScript(WebAPI)+具体案例
最新发布
Node_Hao的博客
04-06 994
JS 的学习主要分为三个大的部分ECMScript: 基础语法部分DOM API: 操作页面结构BOM API: 操作浏览器WebAPI 就包含了 DOM + BOM真正想要写一个更加复杂的有交互式的页面, 还需要WebAPI的支持.
Web-APIs-Quiz:定时多项选择测验
05-23
Web API测验以“办公室”为主题的定时多项选择测验部署链接目录描述该项目的目的是创建一个定时的多项选择测验，以动态更新由JavaScript驱动HTML和CSS为特色。工具职能对于循环数组事件监听器If和If / Else语句快讯...
webapis-playground:Web APIs Playground 是一个通过示例和演示来展示 JavaScript Web APIs 的项目。 客户端 JavaScript API 可帮助为许多低级任务提供包装函数
07-24
Web APIs Playground是一个通过示例和演示来展示 JavaScript Web APIs 的项目。 客户端 JavaScript API 为许多低级任务提供包装函数，例如， 设备硬件交互 客户端存储交互 3D 图形，WebGL 通知 音频视频 还有很多...
xml-apis-ext-1.3.04.jar
03-10
xml-apis-ext-1.3.04.jar
Chapter04-WebAPIs-CodingQuiz:这是我编写的简短问答游戏，旨在通过Web API增强我的技能
03-06
Chapter04-WebAPIs-CodingQuiz 目录 描述 该项目是一款游戏，可向用户询问基本JavaScript概念。 游戏开始时，它将显示5个问题，每个问题一次显示一个。 用户必须在60秒内完成测验。 如果用户选择了错误的答案，将从...
apis-ipas:http
06-08
设置 git clone git@github.com:gkoberger/apis-ipas.gitcd apis-ipasnpm installbower install使用 gulp serve转到
Web Api使用详解（全部实例讲解，可直接运行看效果)完整源码
02-15
Web Api使用详解（全部实例讲解，可直接运行看效果)完整源码
WebAPI编程资料WebAPI 案例 代码 素材 笔记 作业资料.zip
08-04
WebAPI编程资料WebAPI 案例 代码 素材 笔记 作业资料，学习资料，教程 Web APIs-day01 Web APIs-day02 Web APIs-day03 Web APIs-day04 Web APIs-day05 Web APIs-day06 Web APIs-day07 2-案例 3-素材 4-笔记 5-作业 day01_WebAPIs.ppt 随堂测试题 01-getElementById获取元素.html 02-getElementsByTagName获取某些元素.html 03-H5新增获取元素方式(1).html 04-获取特殊元素.html 05-事件三要素.html 06-执行事件步骤.html 07-操作元素之改变元素内容.html 08-innerText和innerHTML的区别.html 09-操作元素之修改元素属性.html 10-分时问候并显示不同图片案例.html 11-操作元素之表单属性设置.html 12-仿京东显示隐藏密码.html 13-操作元素之修改样式属性.html 14-关闭淘宝二维码案例.html 15-循环精灵图.html 16-显示隐藏文本框内容.html 17-通过className更改元素样式.html 18-仿新浪注册页面.html images 作业-开关灯案例.html
WebApi和访问WebApi两个项目
12-05
WebApi和访问WebApi两个项目,有源码，注释非常详细，希望对大家有帮助。 HttpWebRequest类访问webApi
webAPI案例
04-20
一些自习学习过程中做的小案例，涉及到轮播的，常见的左右切换的、旋转木马一样的，手风琴状的轮播图，以及移动端的区域滑动，同时简单的使用了swiper和iscroll两个插件类库
WebAPI:完整的Web API
03-07
WebAPI 完整的Web API
【WEB API项目实战干货系列】- WEB API入门(一)
weixin_30267785的博客
10-11 2488
这篇做为这个系列的第一篇，做基本的介绍，有经验的人可以直接跳到第二部分创建 ProductController。 创建 Web API 项目 在这里我们使用VS2013, .NET 4.5.1创建一个Web API 2的项目 选择项目WEB API模板, 在最下方的MVC主要是默认会自带微软的API Helper, 使用MVC发布 在这里不实用安全 这样我们一个项...
【JavaScript-10】webAPI---DOM事件的内容+案例
前端代码小白的日常博客
06-30 90
事件源 事件类型 事件处理程序 我们也称之为三要素（1）事件源 事件被触发的对象 谁 按钮（2）事件类型 如何触发 什么事件比如鼠标点击（onclick） 还是鼠标经过，还是键盘按下（3）事件处理程序 通过一个函数赋值的方式 完成要学会思路...
Asp.net WebApi 项目示例（增删改查）
xuanwuziyou的专栏
06-25 2万+
1.页面运行效果
Pro Objective-C：从入门到高级编程指南
第9章“Expert Section: Using the Runtime APIs”深入探讨了Runtime API的使用，这是实现自定义行为和扩展语言特性的强大工具。 接下来的章节转向Foundation框架，这是Objective-C应用开发的核心库。第10章介绍了...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值