WEB APIs（2）

应用定时器可以写一个定时轮播图，如下

<!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, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

   <title>~</title>

   <link rel="shortcut icon" href="https://www.bilibili.com/favicon.ico">
   <link rel="stylesheet" href="css/初始化表.css">
   <link rel="stylesheet" href="css/index.css">
   <meta name="keywords" content="..." />
   <style>
      /*写代码时始终要考虑权重问题！*/

      @font-face {
         font-family: 'icomoon';
         src: url('fonts/icomoon.eot?au9n7q');
         src: url('fonts/icomoon.eot?au9n7q#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?au9n7q') format('truetype'),
            url('fonts/icomoon.woff?au9n7q') format('woff'),
            url('fonts/icomoon.svg?au9n7q#icomoon') format('svg');
         font-weight: normal;
         font-style: normal;
         font-display: block;
      }

      .slider {
         width: 560px;
         height: 400px;
         overflow: hidden;
      }

      .slider-wrapper {
         width: 100%;
         height: 320px;
      }

      .slider-wrapper img {
         width: 100%;
         height: 100%;
         display: block;
      }

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

      .slider-footer {
         height: 80px;
         background-color: rgb(72, 131, 213);
         padding: 12px 12px 0 12px;
         position: relative;
      }

      ul {
         display: flex;
         align-items: center;
      }

      .toggle {
         position: absolute;
         right: 0;
         top: 12px;
         display: flex;
      }

      ul li {
         width: 8px;
         height: 8px;
         margin: 4px;
         border-radius: 50%;
         background-color: #fff;
         opacity: 0.4;
         cursor: pointer;
      }

      ul .active {
         width: 12px;
         height: 12px;
         opacity: 1;
      }
   </style>

</head>

<body>

   <div class="slider">
      <div class="slider-wrapper">
         <img src="img/1.jpg" alt="">
      </div>
      <div class="slider-footer">
         <p>哆啦A梦1</p>
         <ul>
            <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>
      const sliderData = [
         { url: 'img/1.jpg', title: '哆啦A梦1', color: 'rgb(72, 131, 213)' },
         { url: 'img/2.jpg', title: '哆啦A梦2', color: 'rgb(43,35,26)' },
         { url: 'img/3.jpg', title: '哆啦A梦3', color: 'rgb(36,3,31)' },
         { url: 'img/4.jpg', title: '哆啦A梦4', color: 'rgb(166,131,143)' }
      ]

      function getRandom(m, n) {
         return Math.floor(Math.random() * (n - m + 1)) + m
      }

      const random = getRandom(0, 3)
      const img = document.querySelector('.slider-wrapper img')
      const p = document.querySelector('.slider-footer p')
      const footer = document.querySelector('.slider-footer')
      document.querySelector(`ul li:nth-child(${1})`).classList.add('active')

      let i = 0
      setInterval(function () {
         i++
         img.src = sliderData[i % 4].url
         p.innerHTML = sliderData[i % 4].title
         footer.style.backgroundColor = sliderData[i % 4].color
         document.querySelector(`ul li:nth-child(${((i - 1) % 4) + 1})`).classList.remove('active')
         document.querySelector(`ul li:nth-child(${(i % 4) + 1})`).classList.add('active')
      }, 1000)
   </script>
</body>

</html>

效果：

此案例有一个缺陷，点击页面无法与用户交互，这就用到了事件监听

事件监听

什么是事件

编程时系统内发生的动作，比如单机一个按钮

监听即一旦有事件触发立即调用一个函数做出响应也称绑定事件

语法：

元素对象.addEventListener('事件类型',要执行的函数)

事件源：哪个DOM元素被触发，就获取这个元素

事件类型：用什么方式触发，鼠标点击click，鼠标经过mouseover等

调用函数：要做什么事

点击即可弹出对话框

事件类型

鼠标事件（click鼠标经过，mouseenter点击和mouseleave离开）

焦点事件（focus获得焦点，blur失去焦点）

键盘事件（Keydown键盘按下和Keyup抬起）

文本事件（input用户输入事件）

由此，可以得到完整轮播图

<!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, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

   <title>~</title>

   <link rel="shortcut icon" href="https://www.bilibili.com/favicon.ico">
   <link rel="stylesheet" href="css/初始化表.css">
   <link rel="stylesheet" href="css/index.css">
   <meta name="keywords" content="..." />
   <style>
      /*写代码时始终要考虑权重问题！*/

      @font-face {
         font-family: 'icomoon';
         src: url('fonts/icomoon.eot?au9n7q');
         src: url('fonts/icomoon.eot?au9n7q#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?au9n7q') format('truetype'),
            url('fonts/icomoon.woff?au9n7q') format('woff'),
            url('fonts/icomoon.svg?au9n7q#icomoon') format('svg');
         font-weight: normal;
         font-style: normal;
         font-display: block;
      }

      .slider {
         width: 560px;
         height: 400px;
         overflow: hidden;
      }

      .slider-wrapper {
         width: 100%;
         height: 320px;
      }

      .slider-wrapper img {
         width: 100%;
         height: 100%;
         display: block;
      }

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

      .slider-footer {
         height: 80px;
         background-color: rgb(72, 131, 213);
         padding: 12px 12px 0 12px;
         position: relative;
      }

      ul {
         display: flex;
         align-items: center;
      }

      .toggle {
         position: absolute;
         right: 0;
         top: 12px;
         display: flex;
      }

      ul li {
         width: 8px;
         height: 8px;
         margin: 4px;
         border-radius: 50%;
         background-color: #fff;
         opacity: 0.4;
         cursor: pointer;
      }

      ul .active {
         width: 12px;
         height: 12px;
         opacity: 1;
      }

      .toggle {
         right: 0;
         top: 12px;

      }

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

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

   </style>

</head>

<body>

   <div class="slider">
      <div class="slider-wrapper">
         <img src="img/1.jpg" alt="">
      </div>
      <div class="slider-footer">
         <p>哆啦A梦1</p>
         <ul>
            <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>

      const sliderData = [
         { url: 'img/1.jpg', title: '哆啦A梦1', color: 'rgb(72, 131, 213)' },
         { url: 'img/2.jpg', title: '哆啦A梦2', color: 'rgb(43,35,26)' },
         { url: 'img/3.jpg', title: '哆啦A梦3', color: 'rgb(36,3,31)' },
         { url: 'img/4.jpg', title: '哆啦A梦4', color: 'rgb(166,131,143)' }
      ]

      const img = document.querySelector('.slider-wrapper img')
      const p = document.querySelector('.slider-footer p')
      const footer = document.querySelector('.slider-footer')
      const next = document.querySelector('.next')
      const prev = document.querySelector('.prev')
      const slider = document.querySelector('.slider')
      document.querySelector(`ul li:nth-child(${1})`).classList.add('active')

      let n=setInterval(function () {
         next.click()
      }, 900)

      let i = 0
      
      prev.addEventListener('click',function(){
         i--
         i=i<0?sliderData.length-1:i
         img.src = sliderData[i % 4].url
         p.innerHTML = sliderData[i % 4].title
         footer.style.backgroundColor = sliderData[i % 4].color
         document.querySelector(`ul li:nth-child(${((i + 1) % 4) + 1})`).classList.remove('active')
         document.querySelector(`ul li:nth-child(${(i % 4) + 1})`).classList.add('active')
      })

      next.addEventListener('click',function(){
         i++
         img.src = sliderData[i % 4].url
         p.innerHTML = sliderData[i % 4].title
         footer.style.backgroundColor = sliderData[i % 4].color
         document.querySelector(`ul li:nth-child(${((i - 1) % 4) + 1})`).classList.remove('active')
         document.querySelector(`ul li:nth-child(${(i % 4) + 1})`).classList.add('active')
      })


      slider.addEventListener('mouseenter',function(){
         clearInterval(n)
      })

      slider.addEventListener('mouseleave',function(){
         n=setInterval(function () {
         next.click()
      }, 900)
      })

   </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, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

   <title>~</title>

   <link rel="shortcut icon" href="https://www.bilibili.com/favicon.ico">
   <link rel="stylesheet" href="css/初始化表.css">
   <link rel="stylesheet" href="css/index.css">
   <meta name="keywords" content="..." />
   <style>
      /*写代码时始终要考虑权重问题！*/

      @font-face {
         font-family: 'icomoon';
         src: url('fonts/icomoon.eot?au9n7q');
         src: url('fonts/icomoon.eot?au9n7q#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?au9n7q') format('truetype'),
            url('fonts/icomoon.woff?au9n7q') format('woff'),
            url('fonts/icomoon.svg?au9n7q#icomoon') format('svg');
         font-weight: normal;
         font-style: normal;
         font-display: block;
      }

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

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

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

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

</head>

<body>

   <div class="mi">
      <input type="search">
      <ul class="list">
         <li><a href="#">0</a></li>
         <li><a href="#">1</a></li>
         <li><a href="#">2</a></li>
         <li><a href="#">3</a></li>
         <li><a href="#">4</a></li>
         <li><a href="#">5</a></li>
         <li><a href="#">6</a></li>
         <li><a href="#">7</a></li>
      </ul>
   </div>
   <script>

      const input=document.querySelector('[type=search]')//属性选择器
      const ul=document.querySelector('.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>

效果：

键盘事件

文本事件

表单输入触发

发布评论案例

<!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, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

   <title>~</title>

   <link rel="shortcut icon" href="https://www.bilibili.com/favicon.ico">
   <link rel="stylesheet" href="css/初始化表.css">
   <link rel="stylesheet" href="css/index.css">
   <meta name="keywords" content="..." />
   <style>
      /*写代码时始终要考虑权重问题！*/

      @font-face {
         font-family: 'icomoon';
         src: url('fonts/icomoon.eot?au9n7q');
         src: url('fonts/icomoon.eot?au9n7q#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?au9n7q') format('truetype'),
            url('fonts/icomoon.woff?au9n7q') format('woff'),
            url('fonts/icomoon.svg?au9n7q#icomoon') format('svg');
         font-weight: normal;
         font-style: normal;
         font-display: block;
      }

      .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(img/哔站头像.gif) no-repeat center/cover;
         margin-right: 20px;
      }
      
      .wrapper textarea {
         outline: none;
         border-color: transparent;
         resize: none;
         background-color: #f5f5f5;
         border-radius: 4px;
         flex: 1;
         padding: 10px;
         transition: all 0.5s;
         height: 50px;
      }

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

      .wrapper button {
         background-color: #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;
      }

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

      const tx=document.querySelector('#tx')
      const total=document.querySelector('.total')
      

      tx.addEventListener('focus',function(){
         total.style.opacity=1
      })

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

      tx.addEventListener('input',function(){
         total.innerHTML=`${tx.value.length}/200字`
      })
   </script>
</body>

</html>