JS——webAPIs（2）

一、知识点

1.四大事件

    //鼠标事件
    //鼠标点击
    div.addEventListener('click',function(){})
    //鼠标经过
    div.addEventListener('mouseenter',function(){})
    //鼠标离开
    div.addEventListener('mouseleave',function(){})
    
    //焦点事件
    //焦点触发
    input.addEventListener('focus',function(){})
    //失去焦点
    input.addEventListener('blur',function(){})
    //内容发生了变化
    input.addEventListener('change',function(){})

    //键盘事件
    //键盘按下
    input.addEventListener('keydown',function(){})
    //键盘弹起
    input.addEventListener('keyup',function(){})

    //文本事件
    //输入内容触发
    input.addEventListener('input',function(){
      //得到输入的内容
      console.log(input.value);
    })

2.事件对象

//事件对象
    const btn=document.querySelector('button')
    btn.addEventListener('click',function(e){
      //获取当前事件类型
      console.log(e.type);
      //获取光标距离浏览器窗口左上角的位置的值
      console.log(e.clientX);
      console.log(e.clientY);
      //获取光标距离当前DOM元素左上角的位置的值
      console.log(e.offsetX);
      console.log(e.offsetY);
    })
    const input=document.querySelector('input')
    input.addEventListener('keyup',function(e){
      //按下键盘的值或按哪个键
      console.log(e.key);
    })

3.trim()方法

//trim()方法:去除字符串左右两边的空格，中间的空格会保留
    const str='        axuangogo      '
    console.log(str.trim());

4.环境对象

// 环境对象：this（谁调用，this就指向谁）
    //普通函数里，this 指向 window
    function fn(){}
    fn()//window.fn()
    //this 指向调用者 btn
    const btn=document.querySelector('button')
    btn.addEventListener('click',function(){
      // btn.style.color='red'
      this.style.color='red'
    })

二、综合案例

1.随机点名

<script>
        // 数据数组
        const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']
        //全局变量
        let random=0
        let timeId=0
        //获取元素
        const start=document.querySelector('.start')
        const qs=document.querySelector('.qs')
        const end=document.querySelector('.end')
        qs.innerHTML=arr[0]
        //点击开始
        start.addEventListener('click',function(){
            //开启定时器
            timeId=setInterval(function(){
            random=parseInt(Math.random()*arr.length)
            qs.innerHTML=arr[random]
            },35)
        })
        //点击结束
        end.addEventListener('click',function(){
            clearInterval(timeId)
            //结束时删除当前抽取的元素，后续不再出现
            arr.splice(random,1)
        })
        //当数组剩最后一个值时禁用按钮
        if (arr.length === 1){
                end.disabled=start.disabled=true
            }
    </script>

2.轮播图（完整版）

<script>
    // 初始数据
    const data = [
      { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
      { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
      { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
      { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
      { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
      { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    ]
    //获取
    const next=document.querySelector('.next')
    const prev=document.querySelector('.prev')
    const img=document.querySelector('.slider-wrapper img')
    const p=document.querySelector('.slider-footer p')
    const footer=document.querySelector('.slider-footer')
    const slider=document.querySelector('.slider')
    let i=0 //信号量，控制播放第几张
    // 右按钮
    //点击事件
    next.addEventListener('click',function(){
      i++
      if(i >= data.length){
        i = 0
      }
      //调用函数
      toggle()
    })
    // 左按钮
    //点击事件
    prev.addEventListener('click',function(){
      i--
      if(i < 0){
        i = data.length - 1
      }
      //调用函数
      toggle()
    })
    
    //声明一个渲染函数作为复用
    function toggle(){
      img.src=data[i].url
      p.innerHTML=data[i].title
      footer.style.backgroundColor=data[i].color
      //更换小圆点
      document.querySelector('.slider-indicator .active').classList.remove('active')
      document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
    }

    // 自动播放
    let timerId = setInterval(function() {
      //利用js自动调用点击事件
      next.click()
    }, 1000);

    // 鼠标经过大盒子 停止定时器
    slider.addEventListener('mouseenter',function(){
      clearInterval(timerId)
    })
    // 鼠标离开大盒子 开启定时器
    slider.addEventListener('mouseleave',function(){
      clearInterval(timerId)
      timerId = setInterval(function() {
      next.click()
    }, 1000);
    })
  </script>

3.小米搜索框

<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>

4.评论回车发布

<script>
    const tx=document.querySelector('#tx')
    const total=document.querySelector('.total')
    const item=document.querySelector('.item')
    const p=document.querySelector('.text')
    //获得焦点时，total显示
    tx.addEventListener('focus',function(){
      total.style.opacity=1
    })
    //失去焦点时，total隐藏
    tx.addEventListener('blur',function(){
      total.style.opacity=0
    })
    //修改评论字数
    tx.addEventListener('input',function(){
      total.innerHTML=`${tx.value.length}/200字`
    })
    //按下回车发布评论
    tx.addEventListener('keyup',function(e){
      if (e.key === 'Enter'){
        //判断输入不等于空，可以写成 if('')，其中''为假
        if(tx.value.trim() !== ''){
          item.style.display='block'
          p.innerHTML=tx.value
        }
        //按下回车清空文本域
        tx.value=''
        //按下回车评论字数复原
        total.innerHTML=`${tx.value.length}/200字`
      }
    })
  </script>

5.tab栏切换

<script>
    //获取元素
    const as=document.querySelectorAll('.tab-nav a')
    //依次绑定鼠标经过事件
    for(let i=0;i<as.length;i++){
      as[i].addEventListener('mouseenter',function(){
        //排他思想
        document.querySelector('.tab-nav .active').classList.remove('active')//移除类
        document.querySelector('.tab-content .active').classList.remove('active')
        this.classList.add('active')//当前的as[i] 添加类
        document.querySelector(`.tab-content .item:nth-child(${i+1})`).classList.add('active')
      })
    }
  </script>