APIs-day2

1.事件监听

语法：对象.addEventListener（'事件类型'，要执行函数）

html 复制代码

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>练习</title>
  <style>
    .box1 {
      height: 100px;
      width: 150px;
      background-color: #ccc;
      position: relative;
      margin: 100px auto;
    }

    .box2 {
      position: absolute;
      top: 10px;
      right: 10px;
      color: #fff;
      background-color: bisque;
      text-align: center;
      width: 15px;
      height: 15px;
      font-size: 15px;

      cursor: pointer;

    }
  </style>

</head>

<body>
  <div class="box1">
    <div class="box2">×</div>
  </div>
  <script>
    const b1 = document.querySelector('.box1')
    const b2 = document.querySelector('.box2')
    b2.addEventListener('click', function () {
      b1.style.display = 'none'
    })



  </script>
</body>

</html>

随机点名案例

html 复制代码

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>练习</title>
  <style>
    h2 {
      text-align: center;
    }

    .box {
      width: 300px;
      margin: 0 auto;
      font-size: 20px;
      display: flex;
    }

    .name {
      color: orange;
    }

    .btns {
      text-align: center;

    }

    .btns button {
      width: 80px;
      height: 30px;
      margin: 20px 70px;
    }
  </style>

</head>

<body>
  <h2>随机点名</h2>
  <div class="box">
    <span>选中姓名：</span>
    <div class="name">显示姓名</div>
  </div>
  <div class="btns">
    <button class="start">开始</button>
    <button class="end">结束</button>
  </div>
  <script>

    const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']
    const name = document.querySelector('.name')
    const start = document.querySelector('.start')
    const end = document.querySelector('.end')
    let n = 0
    let ran = 0
    start.addEventListener('click', function () {
      n = setInterval(function () {
        ran = Math.floor(Math.random() * arr.length)
        name.innerHTML = arr[ran]
      }, 35)
      if (arr.length === 1) {
        clearInterval(n)
        start.disabled = end.disabled = true
      }

    })
    end.addEventListener('click', function () {
      clearInterval(n)
      arr.splice(ran, 1)


    })

  </script>

</body>

</html>

2.事件类型

鼠标事件：click，mouseenter（鼠标经过），mouseleave（鼠标离开）

焦点事件：focus，blur（失去焦点）

键盘事件：keydown，keyup

文本事件：input

案例，完整的轮播图

鼠标放上，自动播放停止，鼠标离开，继续自动播放，点击下一页，往后播放

html 复制代码

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>练习</title>
  <style>
    * {
 
      box-sizing: border-box;
    }
 
    .slider {
      width: 560px;
      height: 400px;
      overflow: hidden;
 
    }
 
    .slider-wrapper {
      width: 100%;
      height: 320px;
 
    }
 
    .slider-wrapper img {
      width: 100%;
      height: 100%;
      display: block;
    }
 
    .slider-footer {
      height: 80px;
      background-color: rgb(100, 67, 68);
      padding: 12px 12px 0 12px;
      position: relative;
    }
 
    .slider-footer p {
      margin: 0;
      color: #fff;
      font-size: 18px;
      margin-bottom: 10px;
    }
 
    .slider-footer .toggle {
      position: absolute;
      right: 10px;
      top: 10px;
 
    }
 
    .slider-footer .toggle button {
      width: 28px;
      height: 28px;
      border: none;
      appearance: none;
      border-radius: 5px;
      cursor: pointer;
      background-color: rgba(255, 255, 255, .1);
      color: #fff;
    }
 
    .toggle button:hover {
      background-color: rgba(255, 255, 255, .2);
    }
 
    .slider-indicator {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
    }
 
    .slider-indicator li {
      width: 8px;
      height: 8px;
      margin: 4px;
      border-radius: 50%;
      background-color: #fff;
      opacity: 0.4;
      cursor: pointer;
 
    }
 
    .slider-indicator li.active {
      width: 12px;
      height: 12px;
      opacity: 1;
    }
  </style>

</head>

<body>
  <div class="slider">
    <div class="slider-wrapper">
      <img src="./06-素材/images/slider01.jpg" alt="">
    </div>
    <div class="slider-footer">
      <p>对人类来说会不会太超前了？</p>
      <ul class="slider-indicator">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="toggle">
        <button class="pre">&lt;</button>
        <button class="next">&gt;</button>
      </div>
 
    </div>
  </div>
  <script>
    const sliderData = [
      { url: './06-素材/images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
      { url: './06-素材/images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
      { url: './06-素材/images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
      { url: './06-素材/images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
      { url: './06-素材/images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: './06-素材/images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: './06-素材/images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
      { url: './06-素材/images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    ]
 
    const img = document.querySelector('.slider-wrapper img')
 
    const p = document.querySelector('.slider-footer p')
 
    const bg = document.querySelector('.slider-footer')
    const next=document.querySelector('.next')
    const pre=document.querySelector('.pre')
    const box=document.querySelector('.slider')
    let i=0
    next.addEventListener('click',function(){
      i++
      i=i>=sliderData.length?0:i
      change()

    })
    pre.addEventListener('click',function(){
      i--
      i=i<0?sliderData.length-1:i
      change()

    })
    function change(){
      img.src=sliderData[i].url
      bg.style.backgroundColor=sliderData[i].color
      p.innerHTML=sliderData[i].title
      document.querySelector('.slider-indicator .active').classList.remove('active')
      document.querySelector(`.slider-indicator li:nth-child(${i+1})`).classList.add('active')

    }
    let n=setInterval(function(){
      next.click()
    },1000)
    box.addEventListener('mouseenter',function(){
      clearInterval(n)
    })
    box.addEventListener('mouseleave',function(){
      clearInterval(n)
      n=setInterval(function(){
      mext.click()
    },1000)
    })
 
  </script>
</body>

</html>

焦点事件案例

html 复制代码

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>练习</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .mi{
      position: relative;
      width: 223px;
      margin: 100px auto;
    }
    .mi input{
      width: 223px;
      height: 48px;
      padding: 0 10px;
      outline: none;
      font-size: 14px;
      line-height: 48px;
      border: 1px solid #e0e0e0;
    }
    .mi .search{
      border: 1px solid #ff6700;
    }
    .result-list{
      display: none;
      list-style: none;
      position: absolute;
      top:48px;
      left:0;
      width: 223px;
      border: 1px solid #ff6700;
      background: #fff;
      border-top:0 ;
    }
    .result-list a{
      display: block;
      padding: 6px 15px;
      text-decoration: none;
      color:#424242;
      font-size:12px;
    }
    .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>
    </ul>

  </div>
  <script>
    const input=document.querySelector('[type=search]')
    const ul=document.querySelector('.result-list')
    input.addEventListener('focus',function(){
      ul.style.display='block'
      input.classList.add('search')

    })
    input.addEventListener('blur',function(){
      ul.style.display='none'
      input.classList.remove('search')

    })

  </script>
</body>

</html>

案例：评论发布，记录输入字数

html 复制代码

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>练习</title>
  <style>
    .wrapper{
      max-width: 800px;
      min-width: 400px;
      display: flex;
      justify-content: flex-end;

    }
    .avatar{
      width: 48px;
      height: 48px;
      background: url('./06-素材(1)/images/avatar.jpg') no-repeat center /cover;
      border-radius: 50%;
      margin-right: 20px;
      overflow: hidden;
    }
    .wrapper textarea{
      flex:1;
      outline: none;
      border-radius: 4px;
      border-color: transparent;
      background: #f5f5f5;
      resize: none;
      padding: 10px;
      height: 30px;
      transition: all .5s;
    }
    .wrapper textarea:focus{
      height: 40px;
      border-color: #e4e4e4;
      background: #fff;
    }
    .wrapper button{
      background: #00aeec;
      color: #fff;
      border: none;
      width: 70px;
      border-radius: 4px;
      margin-left: 10px;
      cursor: pointer;

    }
    .wrapper .total{
      position: absolute;
      margin-right: 80px;
      color:#999;
      margin-top: 5px;
      opacity: 0;
      transition: all .5s;
    }
  </style>

</head>

<body>
  <div class="wrapper">
    <i class="avatar"></i>
    <textarea id="txt" placeholder="发一条友善的评论"  rows="2" maxlength="200"></textarea>
    <button >发布</button>
  </div>
  <div class="wrapper">
    <span class="total">0/200字</span>
  </div>
  <script>
    const txt=document.querySelector('#txt')
    const total=document.querySelector('.total')
    txt.addEventListener('focus',function(){
      total.style.opacity=1

    })
    txt.addEventListener('blur',function(){
      total.style.opacity=0

    })
    txt.addEventListener('input',function(){
      total.innerHTML=`${txt.value.length}/200字`

    })
  </script>
</body>

</html>

3.事件对象

如何获取：在事件绑定的回调函数的第一个参数就是事件对象

一般命名为event、ev、e

事件对象属性：type：获取当前事件类型。clientX/clientY获取光标相对于浏览器可见窗口左上角位置。offsetX/offsetY获取光标相对于当前DOM元素左上角的位置。key：用户按下键盘键的值

str.trim（）去除左右空格

案例：按回车键发送评论

html 复制代码

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>练习</title>
  <style>
    .wrapper {
      max-width: 800px;
      min-width: 400px;
      display: flex;
      justify-content: flex-end;

    }

    .avatar {
      width: 48px;
      height: 48px;
      background: url('./06-素材(1)/images/avatar.jpg') no-repeat center /cover;
      border-radius: 50%;
      margin-right: 20px;
      overflow: hidden;
    }

    .wrapper textarea {
      flex: 1;
      outline: none;
      border-radius: 4px;
      border-color: transparent;
      background: #f5f5f5;
      resize: none;
      padding: 10px;
      height: 30px;
      transition: all .5s;
    }

    .wrapper textarea:focus {
      height: 40px;
      border-color: #e4e4e4;
      background: #fff;
    }

    .wrapper button {
      background: #00aeec;
      color: #fff;
      border: none;
      width: 70px;
      border-radius: 4px;
      margin-left: 10px;
      cursor: pointer;

    }

    .wrapper .total {
      position: absolute;
      margin-right: 80px;
      color: #999;
      margin-top: 5px;
      opacity: 0;
      transition: all .5s;
    }
    .list{
      max-width: 800px;
      min-width: 400px;
      display: flex;
      margin-top: 20px;
    }
    .list .item{
      width: 100%;
      display: flex;

    }
    .info{
      flex:1;
      border-bottom: 1px dashed #e4e4e4;
      padding-bottom: 10px;
    }
    .info p{
      margin: 0;
    }
    .name{
      color: #FB7299;
      font-size: 14px;
      font-weight: bold;
    }
    .txt{
      color: #333;
      padding: 10px 0;
    }
    .time{
      color: #999;
      font-size: 12px;
    }
  </style>

</head>

<body>
  <div class="wrapper">
    <i class="avatar"></i>
    <textarea id="txt" placeholder="发一条友善的评论" rows="2" maxlength="200"></textarea>
    <button>发布</button>
  </div>
  <div class="wrapper">
    <span class="total">0/200字</span>
  </div>
  <div class="list">
    <div class="item" style="display: none;">
      <i class="avatar"></i>
      <div class="info">
        <p class="name">清风徐来</p>
        <p class="txt">大家都辛苦啦，感谢各位大大的努力</p>
        <p class="time">2022-10-10 20:29:21</p>
      </div>

    </div>

  </div>
  <script>
    const txt = document.querySelector('#txt')
    const total = document.querySelector('.total')
    const comment=document.querySelector('.item')
    const content=document.querySelector('.info .txt')
    
    txt.addEventListener('focus', function () {
      total.style.opacity = 1

    })
    txt.addEventListener('blur', function () {
      total.style.opacity = 0

    })
    txt.addEventListener('input', function () {
      total.innerHTML = `${txt.value.length}/200字`

    })
    txt.addEventListener('keyup',function(e){
      if(e.key==='Enter'){
        if(txt.value.trim()){
          comment.style.display='block'
          content.innerHTML=txt.value
          

        }
        
        txt.value=''
        total.innerHTML='0/200字'


      }
    })
  </script>
</body>

</html>

4.环境对象

指的是内部特殊的变量this，代表当前函数运行时所处的环境

谁调用，this就是谁

5.回调函数

函数A作为参数传递给函数B，我们称A是回调函数

6.综合案例-tab切换

html 复制代码

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>练习</title>
  <style>
    *{
      margin:0;
      padding: 0;
    }
    .tab{
      width: 590px;
      height: 340px;
      margin: 20px;
      border: 1px solid #e4e4e4;
    }
    .tab-nav{
      width: 100%;
      height: 60px;
      line-height: 60px;
      display: flex;
      justify-content: space-between;
    }
    .tab-nav h3{
      font-size: 24px;
      font-weight: normal;
      margin-left: 20px;
    }
    .tab-nav ul{
      list-style: none;
      display: flex;
      justify-content:  flex-end;
    }
    .tab-nav ul li{
      margin: 0 20px;
    }
    .tab-nav ul li a{
      text-decoration: none;
      color:#333;
      border-bottom: 2px solid transparent;
      font-size: 14px;
    }
    .tab-nav ul li a.active{
      border-color: #e1251b;
      color:#e1251b;
    }
    .tab-content{
      padding: 0 16px;
    }
    .item{
      display: none;
    }
    .item.active{
      display: block;
    }
  </style>


</head>

<body>
  <div class="tab">
    <div class="tab-nav">
      <h3>每日特价</h3>
      <ul>
        <li><a class="active" href="javascript:;">精选</a></li>
        <li><a  href="javascript:;">美食</a></li>
        <li><a  href="javascript:;">百货</a></li>
        <li><a  href="javascript:;">个护</a></li>
        <li><a  href="javascript:;">预告</a></li>

      </ul>
    </div>
    <div class="tab-content">
      <div class="item active"><img src="./06-素材(1)/images/tab00.png" alt=""></div> 
      <div class="item "><img src="./06-素材(1)/images/tab01.png" alt=""></div> 
      <div class="item "><img src="./06-素材(1)/images/tab02.png" alt=""></div>
      <div class="item "><img src="./06-素材(1)/images/tab03.png" alt=""></div>
      <div class="item "><img src="./06-素材(1)/images/tab04.png" alt=""></div>


    </div>
  </div>
  <script>
    const tab=document.querySelectorAll('.tab-nav a')
    for(let i=0;i<tab.length;i++){
      tab[i].addEventListener('mouseenter',function(){
        document.querySelector('.tab-nav .active').classList.remove('active')
        this.classList.add('active')
        
        document.querySelector('.tab-content .active').classList.remove('active')
        document.querySelector(`.tab-content .item:nth-child(${i+1})`).classList.add('active')
      })
    }
  </script>
</body>

</html>

1.事件监听

随机点名案例

2.事件类型

案例，完整的轮播图

焦点事件案例

案例： 评论发布，记录输入字数

3.事件对象

案例：按回车键发送评论

4.环境对象

5.回调函数

6.综合案例-tab切换

案例：评论发布，记录输入字数