0
点赞
收藏
分享

微信扫一扫

WebAPis第二天

非凡兔 2022-04-07 阅读 76
javascript前端

注册事件

<body>
  <button class="btn">按钮</button>
  <script>
    //需求:当用户单击这个按钮时 将这个按钮里面的文字修改为 做核酸
    //1.获取按钮dom对象
    //2.给dom对象注册事件 鼠标单击
    //3. 按钮里面的文字修改为 做核酸
    //函数一定是 被调用菜户执行 当事件触发的时候 匿名函数就会被执行
    // const btn=document.querySelector('.btn')
    // btn.addEventListener('click',function() {
    //   btn.innerHTML='做核酸'
    // })
    const btn=document.querySelector('.btn')
    btn.addEventListener('click',function() {
      btn.innerHTML='做核酸'
    })
  </script>
</body>

顶部关闭

  <style>
    .box {
      position: relative;
      width: 1000px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
      text-align: center;
      font-size: 50px;
      line-height: 200px;
      font-weight: 700;
    }

    .close {
      position: absolute;
      right: 20px;
      top: 10px;
      width: 20px;
      height: 20px;
      background-color: skyblue;
      text-align: center;
      line-height: 20px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="box">
    我是广告
    <div class="close">X</div>
  </div>
  <script>
    //1.给class='close'dom元素注册 点击事件
    document.querySelector('.close').addEventListener('click', function() {
      // alert('1')
      document.querySelector('.box').style.display = 'none'
    })
  </script>
</body>

随机点名案例

  <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 src="./public.js/publis.js"></script>
  <script>
    // 数据数组
    const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']

    let id //全局变量 在这个script标签中都可以被访问
    let i

    //1.获取到start 按钮注册点击事件
    const start = document.querySelector('.start')
    const qs = document.querySelector('.qs')
    start.addEventListener('click', function () {
      //开启定时器
      id = setInterval(function () {
        //调用函数
        i = getRandom(0, arr.length - 1)
        //从数组中去除对应的数组元素
        qs.innerHTML = arr[i]
      }, 30)
      //判断 这个数组的长度是否等于1 将开始按钮与结束按钮设置为禁用按钮
      /*      if(arr.length===1){
             start.disabled=true
             end.disabled=true
           } */
      if (arr.length === 1) start.disabled = end.disabled = true
    })
    //2 点击结束按钮 停止定时器
    //2.1 获取到 class=end的按钮 注册点击事件
    const end = document.querySelector('.end')
    end.addEventListener('click', function () {
      clearInterval(id)
      //删除被选中的这个元素
      arr.splice(i, 1)
    })
  </script>
</body>

注册事件

<body>
  <button class="btn">按钮</button>
  <script>
    //1.获取class=btn 这个dom对象
    const btn=document.querySelector('.btn')
    //2.注册事件
/*     btn.onclick=function(){
      console.log(1)
    }

    btn.onclick=function(){
      console.log(1)
    } */

    btn.addEventListener('click', function(){
      console.log(3)
    })

    btn.addEventListener('click', function(){
      console.log(4)
    })
  </script>

鼠标事件

  <style>
    .box{
      width: 100px;
      height: 100px;
      background:blue;
    }
  </style>
</head>
<body>
  <button>按钮</button>
  <hr>
  <div class="box"></div>
  <script>
    const button=document.querySelector('button')
    button.addEventListener('dblclick',function(){
      console.log(1)
    })

    //鼠标经过时 让box盒子的背景颜色 变成hotpink
    //鼠标离开时 让box的背景颜色编程pink
/*     const box=document.querySelector('.box')
    box.addEventListener('mouseover',function(){
      box.style.background='#f00'
    })

    box.addEventListener('mouseleave',function(){
      box.style.background='pink'
    }) */
    const box=document.querySelector('.box')
    box.addEventListener('mouseover',function(){
      box.style.background='#f00'
    })
/*     box.addEventListener('mouseleave',function(){
      box.style.background='pink'
    }) */



  </script>

轮播图按钮

  <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 .toggle {
      position: absolute;
      right: 0;
      top: 12px;
      display: flex;
    }

    .slider-footer .toggle button {
      margin-right: 12px;
      width: 28px;
      height: 28px;
      appearance: none;
      border: none;
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
    }

    .slider-footer .toggle button:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .slider-footer p {
      margin: 0;
      color: #fff;
      font-size: 18px;
      margin-bottom: 10px;
    }

    .slider-indicator {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
    }

    .slider-indicator li {
      width: 8px;
      height: 8px;
      margin: 4px;
      border-radius: 50%;
      background: #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="prev">&lt;</button>
        <button class="next">&gt;</button>
      </div>
    </div>
  </div>
  <script>
    // 1. 初始数据
    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)'
      },
    ]

    //2.获取dom三个对象
    const img = document.querySelector('.slider-wrapper img')
    const footer = document.querySelector('.slider-footer')
    const p = document.querySelector('.slider-footer p')

    //3.获取到next dom对象
    const next = document.querySelector('.toggle .next')
    //3.1给next注册点击事件
    let i = 0
    next.addEventListener('click', function () {
      console.log(1)
      i++
      if (i > sliderData.length - 1) {
        i = 0
      }
      //通过i去数组中获取对应的数组元素
      const obj = sliderData[i]

      //更换img标签的src属性值
      img.src = obj.url
      
      //更换footer标签的src样式
      footer.style.backgroundColor = obj.color

      //更换p标签的内容
      p.innerHTML = obj.title

      //现将 有 active 的类名删除
      document.querySelector('.slider-indicator li.active').classList.remove('active')
      //然后给自己添加active的类名
      document.querySelector(`.slider-indicator li:nth-child(${i+1})`).classList.add('active')
    })

    const prev = document.querySelector('.toggle .prev')
    //3.1给prev注册点击事件
    prev.addEventListener('click', function () {
      console.log(1)
      i--
      if (i < 0) {
        i = sliderData.length - 1
      }
      //通过i去数组中获取对应的数组元素
      const obj = sliderData[i]

      //更换img标签的src属性值
      img.src = obj.url
      
      //更换footer标签的src样式
      footer.style.backgroundColor = obj.color

      //更换p标签的内容
      p.innerHTML = obj.title

      //现将 有 active 的类名删除
      document.querySelector('.slider-indicator li.active').classList.remove('active')
      //然后给自己添加active的类名
      document.querySelector(`.slider-indicator li:nth-child(${i+1})`).classList.add('active')
    })

       

    //开启定时器  每隔一秒种  模拟点击右箭头按钮
/*     setInterval(function() {
      next.click()
    },1000) */
/*     setInterval(function() {
      next.click()
    },1000) */
    let timerId = setInterval(function() {
      next.click()
    },1000)


    //鼠标经过大盒子的时候 我们需要停止定时器
/*     const slider=document.querySelector('.slider')
    slider.addEventListener('mouseenter', function(){
      clearInterval(timerId)
    }) */
    //鼠标离开大盒子的时候 我们需要开启定时器
/*     slider.addEventListener('mouseleave', function(){
      clearInterval(timerId)
      timerId = setInterval(function() {
      next.click()
    },1000)
    }) */

   const slider=document.querySelector('.slider')
   slider.addEventListener('mouseenter',function(){
     clearInterval(timerId)
   })
   slider.addEventListener('mouseleave',function(){
     clearInterval(timerId)
     timerId = setInterval(function() {
      next.click()
    },1000)
   })

  </script>
</body>

全选功能

  <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>
    //上面的全选框 打上勾 下面的3个复选框 也要打上勾 反之 上面的全选框没有打上勾 则下面3个复选框 也不要打上勾
    //1.获取上面的全选框 还有下面的三个复选框
    /*      const checkAll=document.querySelector('#checkAll')
        const ck=document.querySelectorAll('.ck')  */
    //2.给上面的全选框注册点击事件
    /* checkAll.addEventListener('click',function(){
      for(let i=0;i<ck.length;i++){
        ck[i].checked =checkAll.checked
      }
    }) */
    /* checkAll.addEventListener('click',function(){
      for(let i=0;i<ck.length;i++){
        ck[i].checked =checkAll.checked
      }
    }) */
    /*      checkAll.addEventListener('click',function(){
          for(let i=0;i<ck.length;i++){
            ck[i].checked =checkAll.checked
          }
        })  */
    /*     const checkAll = document.querySelector('#checkAll')
        const ck = document.querySelectorAll('.ck')
        checkAll.addEventListener('click', function () {
          for (let i = 0; i < ck.length; i++) {
            ck[i].checked = checkAll.checked
          }
        }) */
    const checkAll = document.querySelector('#checkAll')
    const ck = document.querySelectorAll('.ck')
    checkAll.addEventListener('click', function () {
      for (let i = 0; i < ck.length; i++) {
        ck[i].checked = checkAll.checked
      }
    })

    //用户点击下面的复选框 下面的复选框全部都打上勾 上面的全选框也跟着一起打钩 如果下面的复选框有一个没有打钩则全选框不打钩
    //1.给下面的3个复选框 注册点击事件
    //2.看看下面复选框
    for (let i = 0; i < ck.length; i++) {
      ck[i].addEventListener('click', function () {
        //借助于css的选择器:checked
        // 找到所有class=ck的元素 同时还需要打上勾
        /*         if(document.querySelectorAll('.ck:checked').length===ck.length){
                  checkAll.checked=true
                }else{
                  checkAll.checked=false
                } */
        /*         checkAll.checked=document.querySelectorAll('.ck:checked').length===ck.length */
        /*         checkAll.checked = document.querySelectorAll('.ck:checked').     length === ck.length */
        /*                   checkAll.checked = document.querySelectorAll('.ck:checked').length===ck.length */
        checkAll.checked = document.querySelectorAll('.ck:checked').length === ck.length


      })
    }
  </script>
</body>

焦点事件

<body>
  <input type="text">
  <script>
    //1.获取到input标签
    const input = document.querySelector('input')
    //2.input 标签注册focus事件
    input.addEventListener('focus',function(){
      console.log(1)
    })

    //3.input 标签注册blur事件
    input.addEventListener('blur',function(){
      console.log(2)
    })
  </script>
</body>

小米搜索框

    <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" style="display:none">
            <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.需要给 input 的标签注册 获取焦点事件 给自己加一个类名 search 同时 让ul隐藏出来
      //2.需要给input 的标签注册 市区焦点事件 移除 search 同时隐藏出来
/*       const input=document.querySelector('input')
      const ul=document.querySelector('.result-list')
      input.addEventListener('focus',function(){
        input.classList.add('search')
        ul.style.display = 'block'
      })
      input.addEventListener('blur',function(){
        input.classList.remove('search')
        ul.style.display = 'none'
      }) */
      const input=document.querySelector('input')
      const ul=document.querySelector('.result-list')
      input.addEventListener('focus',function(){
        input.classList.add('search')
        ul.style.display = 'block'
      })
      input.addEventListener('blur',function(){
        input.classList.remove('search')
        ul.style.display = 'none'
      })
    </script>
</body>

键盘抬起事件

<body>
  <input type="text">
  <script>
//1.获取元素
const input=document.querySelector('input')
//2.添加事件 keydown 键盘按下
input.addEventListener('keydown',function(){
  console.log(1)
})
input.addEventListener('keyup',function(){
  console.log(2)
})
  </script>
</body>

评论数字统计

  <style>
    .wrapper {
      min-width: 400px;
      max-width: 800px;
      display: flex;
      justify-content: flex-end;
    }

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

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

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

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

    .wrapper .total {
      margin-right: 80px;
      color: #999;
      margin-top: 5px;
      opacity: 0;
      transition: all 0.5s;
    }

    .list {
      min-width: 400px;
      max-width: 800px;
      display: flex;
    }

    .list .item {
      width: 100%;
      display: flex;
    }

    .list .item .info {
      flex: 1;
      border-bottom: 1px dashed #e4e4e4;
      padding-bottom: 10px;
    }

    .list .item p {
      margin: 0;
    }

    .list .item .name {
      color: #FB7299;
      font-size: 14px;
      font-weight: bold;
    }

    .list .item .text {
      color: #333;
      padding: 10px 0;
    }

    .list .item .time {
      color: #999;
      font-size: 12px;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <i class="avatar"></i>
    <textarea id="tx" 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="text">大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]</p>
        <p class="time">2022-10-10 20:29:21</p>
      </div>
    </div>
  </div>
<script>
  //1.获取id=tx的dom元素 class=total 的dom元素
  const tx=document.querySelector('#tx')
  const total=document.querySelector('.wrapper .total')
  //2.给tx dom对象注册 获取 焦点事件
  tx.addEventListener('focus',function(){
    total.style.opacity=1
  })
  //3.给tx dom对象注册 失去 焦点事件
  tx.addEventListener('blur',function(){
    total.style.opacity=0
  })
  //4.给 tx dom 注册 失去焦点事件
  tx.addEventListener('input',function(){
    total.innerHTML=`${tx.value.length}/200字`
  })
</script>
</body>

事件对象

  <script>
    //事件对象:时间在发生有一些数据是保存到一个对象里面在
    //比如:鼠标点击的坐标 键盘按下的那个按键
    //给整个文档注册点击事件
    document.addEventListener('click',function(e){
      // console.log(e.clientX,e.clientY)
      console.log(e.key)
    })
    //client  坐标轴

    //type  获取当前的事件类型
    //clientX/clientY 获取光标相对已浏览器可见窗口左上角的位置
    //offsetX/offsetY  获取光标相对于当前DOM元素左上角的位置
    //key  用户按下的键盘的值
        // 现在不提倡使用keyCode

  </script>

回车发表评论

  <style>
    .wrapper {
      min-width: 400px;
      max-width: 800px;
      display: flex;
      justify-content: flex-end;
    }

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

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

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

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

    .wrapper .total {
      margin-right: 80px;
      color: #999;
      margin-top: 5px;
      opacity: 0;
      transition: all 0.5s;
    }

    .list {
      min-width: 400px;
      max-width: 800px;
      display: flex;
    }

    .list .item {
      width: 100%;
      display: flex;
    }

    .list .item .info {
      flex: 1;
      border-bottom: 1px dashed #e4e4e4;
      padding-bottom: 10px;
    }

    .list .item p {
      margin: 0;
    }

    .list .item .name {
      color: #FB7299;
      font-size: 14px;
      font-weight: bold;
    }

    .list .item .text {
      color: #333;
      padding: 10px 0;
    }

    .list .item .time {
      color: #999;
      font-size: 12px;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <i class="avatar"></i>
    <textarea id="tx" 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="text">大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]</p>
        <p class="time">2022-10-10 20:29:21</p>
      </div>
    </div>
  </div>
<script>
  //1.获取id=tx的dom元素 class=total 的dom元素
  const tx=document.querySelector('#tx')
  const total=document.querySelector('.wrapper .total')
  //2.给tx dom对象注册 获取 焦点事件
  tx.addEventListener('focus',function(){
    total.style.opacity=1
  })
  //3.给tx dom对象注册 失去 焦点事件
  tx.addEventListener('blur',function(){
    total.style.opacity=0
  })
  //4.给 tx dom 注册 失去焦点事件
  tx.addEventListener('input',function(){
    total.innerHTML=`${tx.value.length}/200字`
  })

  //5.当用户点击发布按钮时 需要获取到tx dom 元素里面的内容
  const button=document.querySelector('button')

  //
  const item=document.querySelector('.list .item')
  const p=document.querySelector('.list .text')

  button.addEventListener('click',function(){
    //获取tx dom 对象里面的内容
    //trim() 去掉字符串左右的空格
    const val=tx.value.trim()
    //判断 如果字符串的长度为0 则提示用户
    //在函数里面 return 关键字有两层含义 1.返回数据给函数的调用者  2.中断函数往下执行
    if(val.length===0) return alert('请输入内容')

    //用户输入内容
    //让item 的盒子显示出现
    item.style.display="block"
    //让p 标签里面的内容变成用户输入的内容
    p.innerHTML=val
    //让输入框清空
    tx.value=''
  })
  //用户按下回车键的时候也能发表评论
  //1.给文本域注册键盘按下的事件
  //2.判断是否按下的回车键
  //3.按下回车键等同于点击发表按钮
/*   tx.addEventListener('keydown',function(e){
    if(e.key==='Enter') button.click()
  }) */
/*   tx.addEventListener('keydown',function(e){
    if(e.key==='Enter'){
      button.click()
    }
  }) */
/*   tx.addEventListener('keydown',function(e){
    if(e.key==='Enter'){
      button.click()
    }
  }) */
  tx.addEventListener('keydown',function(e){
    if(e.key==='Enter'){
      button.click()
    }
  })
</script>
</body>

环境对象

<body>
  <button>按钮</button>
  <script>
    const button = document.querySelector('button')
    document.querySelector('button').addEventListener('click', function () {
      // 在函数里面有一个 this 的关键字 他是一个对象
      // 谁调用这个函数 函数里面的 this 就代表谁
      console.log(this)
      // button.innerHTML = 'aaa'

      this.innerHTML = '狗子'
    })


    // 我们之前在js基础学习的函数与变量
    // 其实它本质时 window 对象的属性与方法
    function fn() {
      console.log(this)
    }

    fu()
  </script>

this到底是谁

    <body>
      <button id="btn">按钮</button>
      <script>
        const button=document.querySelector('#btn')

        function fn(){
          //this 他是一个对象
          //谁在调用这个函数 他就是谁
          console.log(this)
        }

        fn()
        btn.addEventListener('click',fn)
      </script>
    </body>

回调函数

<body>
  <script>
    //将一个函数作为参数  传递给另外一个函数  那么这个函数就称之为回调函数

    function B(){
      f()
    }
    B(function A(){
      console.log(1)
    })
  </script>
</body>

tab栏切换

  <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;
      font-size: 14px;
    }

    .tab-nav ul li a {
      text-decoration: none;
      border-bottom: 2px solid transparent;
      color: #333;
    }

    .tab-nav ul li a.active {
      border-color: #e1251b;
      color: #e1251b;
    }

    .tab-content {
      padding: 0 16px;
    }

    .tab-content .item {
      display: none;
    }

    .tab-content .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-素材/images/tab00.png" alt="" /></div>
      <div class="item"><img src="./06-素材/images/tab01.png" alt="" /></div>
      <div class="item"><img src="./06-素材/images/tab02.png" alt="" /></div>
      <div class="item"><img src="./06-素材/images/tab03.png" alt="" /></div>
      <div class="item"><img src="./06-素材/images/tab04.png" alt="" /></div>
    </div>
  </div>
<script>
  // 1. 先给a标签注册鼠标经过事件  

  const a=document.querySelectorAll('.tab-nav a')
  const div=document.querySelectorAll('.tab-content .item')
  //a 是一个伪数组 遍历数组
  for(let i=0;i<a.length;i++){
    a[i].addEventListener('mouseenter',function(){
        // 1.1 现将带有active 类名的 a 从他身上active类名去除
       //1.2在给自己添加即可
      document.querySelector('.tab-nav a.active').classList.remove('active')
      this.classList.add('active')
      //上面a的数量和下面div的数量一样 换句话说 下标是一样的
      // 通过下标找到下面对应的哪一个div 给他添加active
      document.querySelector('.tab-content .active').classList.remove('active')

      document.querySelector(`.tab-content .item:nth-child(${i+1}`).classList.add('active')
      

      /*       document.querySelector('.tab-content div.active').classList.remove('active')
                 div[i].classList.add('active') */
    })
  }
</script>
</body>
举报

相关推荐

html第二天

html

CSS第二天

css前端html

RHCSA第二天

网络

出差第二天

简书Java编程语言

作业第二天

python

签到第二天

c语言

JAVA第二天

java开发语言后端

rhcsa第二天

linux

ElasticSearch第二天

javaelasticsearch搜索Java后端开发

HCIP第二天

网络
0 条评论