WebAPI事件实战案例-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45356160/article/details/127993402

webapi第二天

事件
高阶函数
- 回调函数
环境对象
编程思想
综合案例

事件

在这里插入图片描述

事件监听

在这里插入图片描述

点名案例

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        h2 {
            text-align: center;
        }

        .box {
            width: 600px;
            margin: 50px auto;
            display: flex;
            font-size: 25px;
            line-height: 40px;
        }

        .qs {

            width: 450px;
            height: 40px;
            color: red;

        }

        .btns {
            text-align: center;
        }

        .btns button {
            width: 120px;
            height: 35px;
            margin: 0 50px;
        }
    </style>
</head>

<body>
    <h2>随机点名</h2>
    <div class="box">
        <span>名字是：</span>
        <div class="qs">这里显示姓名</div>
    </div>
    <div class="btns">
        <button class="start">开始</button>
        <button class="end">结束</button>
    </div>

    <script>
        // 数据数组
        let arr = ['马超', '黄忠', '赵云', '关羽', '张飞']
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        let start = document.querySelector('.start')
        let end = document.querySelector('.end')
        let qs = document.querySelector('.qs')
        let btns = document.querySelector('.btns')
        let set = null
        let random = null
        start.addEventListener('click',function(){
            //设置定时器一直抽取名字
            set = setInterval(function(){
            random = getRandom(0,arr.length-1)
            qs.innerHTML = `${arr[random]}`
            },100)
        }) 
        end.addEventListener('click',function(){
            //set有作用域,直接访问是访问不到的,所以要
            //设置set为全局变量
            clearInterval(set)
            arr.splice(random,1)
            if(arr.length == 0){
                btns.style.display = 'none'               
            }
        })

    </script>
</body>

</html>

事件类型

在这里插入图片描述

小米搜索框案例(焦点事件)

在这里插入图片描述

<!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;
        }

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

        .result-list {
            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>
        <script>
            let s = document.querySelector('input')
            let l = document.querySelector('.result-list')
            function a(){
                l.style.display = 'block'
                // 添加一个使她变色的类
                s.classList.add('search')
            }
            function b(){
                l.style.display = 'none'
                s.classList.remove('search')
            }
            s.addEventListener('focus', a)
            s.addEventListener('blur', b)

            // let l = document.querySelectorAll('.result-list li')
            // function a(){
            //     for(let i; i < l.length; i++){
            //         l[i]. 
            //     }
            // }
        </script>
    </div>
</body>
</html>

微博输入案例(文本事件)

在这里插入图片描述
获得的知识点:
得到文本的值可以采用area.value获得

<!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>
        .weibo {
            position: relative;
            width: 400px;
            height: 400px;
        }
        textarea{
            position: absolute;
            right: 0;
            width: 350px;
            height: 350px;
        }
        p {
            position: absolute;
            bottom: 0;
            right: 0;
        }


    </style>
</head>
<body>
    <div class="weibo">
        <textarea name="weibo" id="area" cols="30" rows="10" maxlength="200"></textarea>
    <div class="fabu">
        <p><span></span>/200<button>发布</button></p>
    </div>
    </div>
    <script>
        // // id选择器
        // let area = document.querySelector('#area')
        // let f = document.querySelector('span')
        // function a(){
        //     let num = area.value.length
        //     f.innerHTML = `${num}`
        // }
        // area.addEventListener('input',a)
        


        //测试
        let area = document.querySelector('textarea')
        let f = document.querySelector('span')
        function a(){
            //获取文本内容的长度要 类名.value.length
            let num = area.value.length
            f.innerHTML = `${num}`
        }
        area.addEventListener('input',a)


    </script>
</body>
</html>

全选文本框(鼠标事件)

在这里插入图片描述

<!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;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
      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;
    }

    .allCheck {
      width: 80px;
    }
    </style>
</head>
<body>
    <table>
        <tr>
          <th class="allCheck">
            <input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
          </th>
          <th>商品</th>
          <th>商家</th>
          <th>价格</th>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="check" class="ck">
          </td>
          <td>小米手机</td>
          <td>小米</td>
          <td>￥1999</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="check" class="ck">
          </td>
          <td>小米净水器</td>
          <td>小米</td>
          <td>￥4999</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="check" class="ck">
          </td>
          <td>小米电视</td>
          <td>小米</td>
          <td>￥5999</td>
        </tr>
      </table>
      <script>
        let a = document.querySelector('.allCheck input')
        let b =document.querySelectorAll('.ck')
        function p(){
            if(a.checked == true){
                for(let i = 0; i < b.length; i++){
                    b[i].checked = true   
                }
            }
            else{
                for(let i = 0; i < b.length; i++){
                    b[i].checked = false 
            }
        }
    }
    a.addEventListener('click',p)
      </script>
</body>
</html>

购物车加减(鼠标事件)

在这里插入图片描述

<!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>
        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">
        </div>

        <script>
            //字符型
            console.log(typeof total.value)
            let a = document.querySelector('#add')
            let b = document.querySelector('#reduce')
            let t = document.querySelector('#total')
            function aa(){
               // t.value = t.value + 1
               //这样写有问题，字符型
               //这样写能隐式转换
               t.value++
            }
            function bb(){
                if(t.value != 1){
                b.disabled == false
                t.value--
                }
                else{
                    t.value = 1
                    b.disabled == true
                }
            }
            a.addEventListener('click',aa)
            b.addEventListener('click',bb)
            
            
        </script>
    
</body>
</html>

高阶函数

在这里插入图片描述

回调函数

在这里插入图片描述

环境对象

在这里插入图片描述

编程思想

在这里插入图片描述

综合案例

在这里插入图片描述
学到的知识:
classlist的运用
排他思想:全消灭,复活自己


<!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.active {
      display: block;
    }

    .tab li.active {
      border-color: blue;
      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 active">
        <a href="###"><img src="imgs/guojidapai.jpg" alt="" /></a>
      </div>
      <div class="main">
        <a href="###"><img src="#" alt="" /></a>
      </div>
      <div class="main">
        <a href="###"><img src="#" alt="" /></a>
      </div>
      <div class="main">
        <a href="###"><img src="#" alt="" /></a>
      </div>
    </div>
  </div>
  <script>
    let pic = ['imgs/guojidapai.jpg','imgs/guozhuangmingpin.jpg','imgs/qingjieyongpin.jpg','imgs/nanshijingpin.jpg']
    let tabitem = document.querySelectorAll('.tab-item')
    let img = document.querySelector('img')
    for(let i =0;i<tabitem.length;i++){
      tabitem[i].addEventListener('click',function(){
        img.src =` ${pic[i]} `
        //注意add加的是类名
        //排他思想,全消灭,复活自己
        for(let j = 0;j<tabitem.length;j++){
          tabitem[j].classList.remove('active')  
        }
        tabitem[i].classList.add('active')

      })
    }
  </script>
</body>

</html>