滚动,自定义属性,加载事件，scroll offset clinet 三家族，屏幕大小，延时器，location，navigator，递归等等

亦随
206 阅读3分钟

highlight: a11y-dark

还有history对象和swiper插件加案例

1.滚动事件

1649750121339.png

<script>
        const ul = document.querySelector('ul')
        //scroll:滚动事件
        window.addEventListener('scroll', function () {
            console.log('你瞅啥');
        })

2.获取滚动距离

document.documentElement.scrollTop：获取滚动距离

 <script>
      // 页面级别的滚动
      window.addEventListener("scroll",function () {
        // 这个代码可以获取到当前页面的滚动距离
        console.log(document.documentElement.scrollTop);
        
      })
    </script>

综合案例

用到固定定位，滚动事件，获取滚动距离，判断语句等，第二种方法用先进技术css的，就是碰到浏览器的顶部会黏住不再上升，但是存在兼容性问题，粘性定位 兼容性问题 慎用！

<!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>
        .head {
            height: 150px;
            background-color: yellowgreen;
        }

        .nav {
            height: 100px;
            background-color: turquoise;
            /* 第二种方法css的，就是碰到浏览器的顶部会黏住不再上升，但是存在兼容性问题
             /* 粘性定位 兼容性问题  慎用！  */
            /* position: sticky;
            left: 0;
            top: 0;
            width: 100%; */
        }
        .fixed {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="head"></div>
    <div class="nav"></div>
    <ul>1</ul>
    <ul>2</ul>
    <ul>3</ul>
    <ul>4</ul>
    <ul>5</ul>
    <ul>6</ul>
    <ul>7</ul>
    <ul>8</ul>
    <ul>65</ul>
    <ul>66</ul>
    <ul>67</ul>
    <ul>68</ul>

        /* 
        第一种
    需求：  当页面滚动到一定的高度  nav变成了固定定位 
    1 一定高度 ？？？   其实就是header标签的高  250px

    步骤：
    1 需要在页面滚动距离 大于或者等于 250 的高时候 
      1 设置nav标签做一个 固定定位
    2 否则就取消固定定位  

    3 小bug 因为 nav标签做固定定位，不再拥有高度，自然把下面的标签给挡住！！！ 
      解决它 
      给nav上面的标签 header标签 添加下外边距，大小 等于 nav的高
     */

        let head = document.querySelector('.head')
        let nav = document.querySelector('.nav')
        window.addEventListener('scroll', function () {

            const top = document.documentElement.scrollTop
            if (top >= 150) {
                nav.classList.add('fixed')
                //加上下边距解决脱标bug
                head.style.marginBottom = 150 + 'px';
            }
            else {
                nav.classList.remove('fixed')
                head.style.marginBottom = 0;
            }
        })
    </script>
</body>

</html>

火箭缓慢升空案例

用到固定定位，滚动事件，获取滚动距离，判断语句，定时器开启和清除等

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>16-小火箭导航-动画效果</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        height: 200vh;
        background-image: linear-gradient(black, red, blue, green);
      }
      a {
        width: 150px;
        height: 195px;
        position: fixed;
        bottom: 100px;
        right: 50px;
        background-image: url(./images/gotop.png);
        /* display: none; */
      }
      a:hover {
        background-image: url(./images/gotop.gif);
      }

      /* html{
        transition: 1s;
      } */
    </style>
  </head>
  <body>
    <!-- <a href="#"></a> -->
    <a href="javascript:;"></a>
    <script>
      /* 
      定时器来实现 
       */

      const a = document.querySelector('a');

      window.addEventListener('scroll', function () {
        //  获取页面滚动的距离
        const scrollTop = document.documentElement.scrollTop;
        if (scrollTop > 700) {
          // 显示火箭
          a.style.display = 'block';
        } else {
          // 隐藏
          a.style.display = 'none';
        }
      });

      a.addEventListener('click', function () {
        // document.documentElement.scrollTop = 0;
        // console.log(document.documentElement); // 就是根标签 html

        // 慢慢的来设置 scrollTop 减少为0 即可
        let timeId = setInterval(function () {
          document.documentElement.scrollTop -= 20;
          console.log('定时器执行', document.documentElement.scrollTop);

          if (document.documentElement.scrollTop === 0) {
            // 清除定时器
            clearInterval(timeId);
          }
        }, 10);
      });
    </script>
  </body>
</html>

3.自定义属性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>03-标签的自定义属性.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <a href="#">标签</a>
    <div msg="你好" data-index="123"></div>
    <ul>
      <li data-index="0">0</li>
      <li data-index="1">1</li>
      <li data-index="2">2</li>
    </ul>

    <script>
      /* 
      标签的固有属性  天生 自带
      1 a标签的href 
      2 img 标签的src title属性
      3 div class id 

      也允许开发者 自己往标签上填写一些属性 - 自定义属性
      h5建议 开发者如果想要在标签上 新增自定义属性的 
      data-xxx
      data-num="100" data-index="200"
      在可以js中通过dom元素
      dom.dataset.xxx
      dom.dataset.num  100 
      dom.dataset.index 200

      前端的案例中 
      点击li标签的获取到li标签的下标-位置 index
      数组删除元素  
      arr.splice(要删除的元素的位置 )
       */


       const ul=document.querySelector("ul");
       ul.addEventListener("click",function (event) {
         if(event.target.nodeName==="LI"){
           console.log(event.target.dataset.index);
         }
         
       })
    </script>
  </body>
</html>

4.加载事件

1649898998699.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>04-页面加载资源事件.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <video
      controls
      src="https://upos-sz-mirrorcos.bilivideo.com/upgcxcode/36/82/569828236/569828236-1-16.mp4?e=ig8euxZM2rNcNbRVhwdVhwdlhWdVhwdVhoNvNC8BqJIzNbfq9rVEuxTEnE8L5F6VnEsSTx0vkX8fqJeYTj_lta53NCM=&uipk=5&nbs=1&deadline=1649906485&gen=playurlv2&os=cosbv&oi=2028708454&trid=926e1b0362e4450296eda32f1f091968h&platform=html5&upsig=de4859a796154f0ae2152c7a97789a6d&uparams=e,uipk,nbs,deadline,gen,os,oi,trid,platform&mid=414874315&bvc=vod&nettype=0&bw=52793&logo=80000000"
    ></video>
    <script>
      /* 
      有很多业务和功能 都需要使用到外部资源（外部css js 图片 视频）
      我们希望等待资源都加载回来，才去做其他事情
      写代码的时候，我们会把所有的代码 都写在  window load事件中来确保 资源全部都可以使用 
       */
      window.addEventListener('load', function () {
        console.log('load 标签加载完毕-标签对应外部资源加载完毕');
      });
      // DOMContentLoaded 
      // 页面的标签 都加载完毕就触发了，不需要等待标签的内容回来
      // video标签一生成， 事件就触发 
      // load事件等待 vide标签生成了，同时 video标签内的视频也加载回来 才触发 

      // video加载 分两部
      // 只是加载标签而已 很快 DOMContentLoaded    快
      // 会去加载 标签对应的视频 比较慢  load 慢
      document.addEventListener("DOMContentLoaded",function () {
        console.log("DOMContentLoaded 标签加载完毕就触发了");
      })
    </script>
  </body>
</html>

5.页面加载事件的作用

1649901790974.png

DOMContentLoaded和load的区别是：DOMContentLoaded是等标签加载结束就执行，而load是等外部支援和内容都加载完成才开始执行

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>05-页面加载事件的作用.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
    <!-- 以前写js 习惯写在head标签中 -->
    <!-- <script>
      // 等待标签加载完毕了，才去获取dom元素
      document.addEventListener('DOMContentLoaded', function () {
        const h1 = document.querySelector('h1');
        console.log(h1);
        h1.innerText = '我们自己修改的';
      });
      // js先执行，但是 dom元素还没有开始加载
    </script> -->
  </head>
  <body>
    <h1>大标题</h1>
    <!-- <img
      src="https://dss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/33867296_1452769018_259_194.jpg"
      alt=""
    /> -->
    <!-- 
      load 作用 
      我希望  在h1标签上输出一张图片的高度
     -->
    <script>
      // window.addEventListener('load', function () {
      // 等待图片完全加载了 内容也回来， 才触发
      // const img = document.querySelector('img');
      // 获取图片标签的宽度
      // console.dir(img.height); // 0  因为 代码执行到这里的时候 图片的内容还没有回来

      // document.querySelector("h1").innerHTML=img.height;
      // });

      // 现在建议把代码 写在 </body> 上面 ， 先等待dom标签加载，然后才去获取dom元素
    </script>
  </body>
</html>

6.scroll家族

暂时就是获取滚动的宽度和高度的数据

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>06-scroll家族.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .scroll-dom {
        width: 300px;
        height: 300px;
        background-color: aqua;

        /* 滚动条 */
        /* overflow: scroll; */
        overflow-x: scroll;

        /* border: 20px; */

        /* 让文字不要换行 */
        white-space: nowrap;
      }
    </style>
  </head>
  <body>
    <div class="scroll-dom">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis
      similique rerum ea dicta assumenda? Quam error eaque accusamus. Ipsa,
      dicta aspernatur! Consequatur odit eos, dignissimos rem iure excepturi
      commodi dicta. Lorem ipsum dolor sit amet consectetur, adipisicing elit.
      Cum, possimus ab incidunt ipsum animi reprehenderit quia deserunt odit?
      Laborum natus asperiores amet adipisci laudantium tempore nesciunt
      blanditiis quis voluptas excepturi! Lorem ipsum dolor, sit amet
      consectetur adipisicing elit. Eaque error quae, minima facilis recusandae
      cumque qui sed saepe excepturi accusamus neque, illum eius perspiciatis
      aliquid dicta ullam est et maiores!
    </div>
    <script>
      /* 
      scrollWidth  不包含 滚动条 大小 
      scrollWidth  等于容器可以滚动的大小 
       */
      const scrollDom = document.querySelector('.scroll-dom');
      // 输出它宽度高度
      console.log(scrollDom.scrollWidth);
      // console.log(scrollDom.scrollHeight);

      // 获取当前容器滚动了的距离
      scrollDom.addEventListener('scroll', function () {
        // console.log(this.scrollTop);// 获取当前容器的滚动距离
        console.log(this.scrollLeft); // 获取当前容器的滚动距离
      });

      /* 
      1 页面滚动 使用  window.addEventListener("scroll") 事件
      2 页面的滚动距离 document.documentElement.scrollTop


      1 元素滚动 dom.addEventListener("scroll")
      2 获取元素滚动的距离
        dom.scrollTop
        dom.scrollLeft

      3 scrollWidth 整个可以滚动的区间的宽度
      4 scrollHeight 整个可以滚动的区域的高度 

      小细节  PC端的滚动条大小 17px
      小细节 移动端的滚动条 不占大小 

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

7.offset家族

1649905639116.png

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <title>07-offset家族.html</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .offset {
            width: 300px;
            height: 300px;
            background-color: aqua;

            overflow: scroll;
            margin-left: 10px;
        }

        .parent {
            position: fixed;
            left: 400px;
            top: 30px;
            background-color: salmon;
            width: 400px;
            height: 400px;
        }
    </style>
</head>

<body>
    <div class="parent">
        <h1>标题</h1>
        <div class="offset"></div>
    </div>
    <script>
        const offsetDom = document.querySelector('.offset');

        // 获取宽度和高度 包含这滚动条的大小 
        console.log(offsetDom.offsetWidth);// 300   自身的宽度
        console.log(offsetDom.offsetHeight);// 300   自身的高度

        // console.log(offsetDom.scrollWidth); // 283  自身的宽度减去滚动条17
        // console.log(offsetDom.scrollHeight);// 283   自身的高度减去滚动条17

        // 获取当前元素距离 定位了的父元素的大小(找不到定位了的父元素，相对于页面来计算)
        console.log(offsetDom.offsetLeft);  //自身跟父盒子左边的距离
        console.log(offsetDom.offsetTop);   //自身跟父盒子上边的距离


        /*
        总结 offset家族
        1 offsetWidth  获取元素的宽度 包含这滚动条
        2 offsetHeight 获取元素的高度 包含这滚动条
        3 offsetLeft 获取定位了的父元素的 水平距离 左 
        4 offsetTop 获取定位了的父元素的 垂直距离 上
         */
    </script>
</body>

</html>

8.client家族

1649906146291.png

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <title>08-client家族.html</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .client {
            width: 300px;
            height: 300px;
            background-color: aqua;
            margin: 100px auto;

            overflow: scroll;

            border-left: 1px solid #000;
            border-right: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="client">
        <h1>1</h1>
        <h1>2</h1>
        <h1>3</h1>
        <h1>4</h1>
        <h1>5</h1>
        <h1>87</h1>
        <h1>88</h1>
        <h1>89</h1>
        <h1>90</h1>
        <h1>91</h1>
        <h1>92</h1>
        <h1>93</h1>
        <h1>94</h1>
        <h1>95</h1>
        <h1>96</h1>
        <h1>97</h1>
        <h1>98</h1>
        <h1>99</h1>
        <h1>100</h1>
    </div>
    <script>
        const clientDom = document.querySelector('.client');
        // 宽度和高度
        console.log(clientDom.clientWidth); // 不包含 滚动条（类似 scrollWidth）
        console.log(clientDom.clientHeight); // 不包含 滚动条（类似 scrollHeight）

        // 获取边框的大小
        console.log(clientDom.clientLeft); // 左边框
        console.log(clientDom.clientRight); // 有没有？
        console.log(clientDom.clientTop); // 上边框  

      // scollWidth     获取容器的宽度（包含滚动的区域）
      // offsetWidth    获取可视区域的宽度（包含滚动条）
      // clientWidth    获取可视区域的宽度（不包含滚动条）

      // scrollLeft    获取左侧滚动的距离
      // offsetLeft    获取和已经定位了的父级元素的左距离
      // clientLeft    获取左边框的大小 


    </script>
</body>

</html>

scroll offset clinet 三个家族总结

scollWidth 获取容器的宽度（包含滚动的区域）

offsetWidth 获取可视区域的宽度（包含滚动条）

clientWidth 获取可视区域的宽度（不包含滚动条）

scrollLeft 获取左侧滚动的距离

offsetLeft 获取和已经定位了的父级元素的左距离

clientLeft 获取左边框的大小

1649907878409.png

9.屏幕大小改变事件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>09-屏幕大小改变事件.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      div {
        width: 1rem;
        height: 1rem;
        background-color: aqua;
        font-size: 1rem;
      }
    </style>
  </head>
  <body>
    <div>div</div>
    <script>
      // 页面大小发生变化了就会触发的事件 resize window来绑定
      window.addEventListener('resize', function (event) {
        console.log('页面大小发生变化了');
        // 移动端屏幕适配 rem   淘宝js库，flexible.js  作用  设置html的字体大小 为当前页面的宽度的十分之一
        // 获取当前页面的宽度
        console.log(document.body.offsetWidth);
        // 设置页面html标签的字体大小为屏幕的十分之一
        document.documentElement.style.fontSize =
          document.body.offsetWidth / 10 + 'px';

        // 响应式布局的时候  发一个js文件  方便根据当前页面的宽度 告诉我们屏幕的种类和宽度
        const width = document.body.offsetWidth;

        if (width > 1200) {
          document.querySelector('title').innerText = `大屏幕 ${width}`;
        } else if (width > 992) {
          document.querySelector('title').innerText = `中等屏幕 ${width}`;
        } else if (width > 768) {
          document.querySelector('title').innerText = `小屏幕 ${width}`;
        } else {
          document.querySelector('title').innerText = `极小屏幕 ${width}`;
        }
      });
    </script>
  </body>
</html>

10.延时器

1649926755188.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>13-定时器-延时器.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      // 延时器 - 只会执行一次而已
      let timeid = setTimeout(function () {
        console.log('猜猜我是谁');
      }, 5000);
      // 取消延时器
      clearTimeout(timeid);

    </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: 500px;
            height: 500px;
            background-color: yellowgreen;
            margin: 100px auto;
            text-align: center;
            line-height: 500px;
            font-size: 20px;

            color: linear-gradient(red 50%, blue);
        }
    </style>
</head>

<body>
    <div>
        我5秒后就闪了

    </div>
    <script>


        let i = 4
        //计时器，不清除就无限循环
        let ti = setInterval(() => {
            document.querySelector('div').innerText = `我${i--}秒后就闪了`
            if (i === 0) {
                clearInterval(ti)
            }
        }, 1000);
        //延时器，写法和计时器一样，也有结束，但是延时器只执行一次，时间结束就不见了
        setTimeout(function () {
            document.querySelector('div').style.display = 'none'
            //延时五秒
        }, 5000)

    </script>
</body>

</html>

11.location

1649927670726.png

  1. 使用a标签 href 属性 可以实现页面跳转 (1) 在js中，也可以直接跳转 location.href 来跳转 (2) location.href 也可以实现刷新 location.href = location.href;

  2. location.reload(true);// true 强制刷新！

  3. search 后一个阶段就会用到它 了 获取 url上 ？ 后面一串字符 /17-location.html?a=1&b=2

  4. hash 学习到了vue阶段就会用到了 获取 # 后面一串字符 /17-location.html#/index #/index

    写法如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>17-location.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <button>跳转到百度</button>
    <script>
      // 1 使用a标签 href 属性 可以实现页面跳转
      // 2 在js中，也可以直接跳转  location.href 来跳转
      // 3 location.href 也可以实现刷新 location.href = location.href;
      // 4  location.reload(true);// true 强制刷新！
      // 5 search 后一个阶段就会用到它 了  获取 url上 ？ 后面一串字符  /17-location.html?a=1&b=2
      // 6 hash 学习到了vue阶段就会用到了 获取 # 后面一串字符 /17-location.html#/index  #/index

      const button = document.querySelector('button');
      button.addEventListener('click', function () {
        // location.href="http://www.baidu.com";

        // console.log(location.href);// http://127.0.0.1:5500/17-location.html

        // 刷新功能
        // location.href = location.href; // 刷新功能

        // reload实现刷新
        // location.reload(true);// true 强制刷新！ 
        console.log(location.hash);
      });

      setTimeout(function () {
        // location.href="http://www.baidu.com";
      }, 5000);
    </script>
  </body>
</html>

12.递归

现在的理解就是函数自己调用自己

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>15-递归.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div>
      <p>
        <span
          ><a href=""> <button></button> </a
        ></span>
      </p>
    </div>
    <script>
      /* 
      递归
      1 一个函数调用自己  

      2 使用场景
        有一个函数，可以打印出 一个dom元素的所有祖先元素 
        不可能提前知道 这个a标签有多少个父元素 

        这个函数接收一个参数，= dom 
        如果这个dom元素有父元素，就继续调用自己函数


      3 使用场景
        1 假设你现在得了肺炎 警察叔叔 
          先找你 ->  找你的邻居（得了肺炎） -> 找你的邻居的邻居（得了肺炎）->找你的邻居的邻居（得了肺炎）...
          直到找到一个邻居 没事  警察叔叔 不找结束了 
       */
      // let index = 0;

      // function func() {
      //   index++;
      //   console.log(index);
      //   func();
      // }

      // func();

      const button = document.querySelector('button');

      getParent(button);
      function getParent(dom) {
        console.log(dom);
        if (dom.parentNode) {
          // 如果有父元素
          getParent(dom.parentNode);
        } else {
          console.log('结束啦');
        }
      }
    </script>
  </body>
</html>

13.navigator对象

工作的时候都是直接去网上扒

1649929557100.png

1649932116453.png

14.history对象

操作网页退后或者前进的

1649930977116.png

<!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>
</head>

<body>
    <button class="hou">前进</button>
    <button class="qian">后退</button>
    <a href="https://juejin.cn/user/1640895228686382">你猜是什么</a>

    <script>
        const qian = document.querySelector('.qian')
        const hou = document.querySelector('.hou')
        qian.addEventListener('click', function () {
            //前进
            // history.forward()
            history.go(1)  //前进一个记录

        })
        hou.addEventListener('click', function () {
            //后退
            // history.back()
            history.go(-1)  //后退一个记录

        })
    </script>
</body>

</html>

15.swiper插件

1649931835983.png

网址

https://swiper.com.cn/

步骤一

1649942979840.png

步骤二，会跳到使用方法，按照步骤来就行

1649943160856.png

步骤三，点击下载，里面有很多版本，不一定要最新的，因为首页是7，所有我们也下载7的版本就好

1649943232259.png

步骤四，想要什么效果都可以来这里找，各种用法都有

1649943352755.png

avatar
文章
阅读
粉丝