05-JS-web API-加载事件-三大家族-swiper插件-延时器-递归-事件取消绑定

1 加载事件-load(常用)-DOMContentLoaded(少用)

加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件

1 load (常用)

主要作用:

HTML 中的标签结构和 CSS JS 样式加载完毕,才触发后续内容

给 window 添加 load 事件

 有些时候需要等页面资源全部处理完了做一些事情

老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到就会报错

所以用上 load事件,就能确保,标签以及 CSS JS 样式都加载完毕

代码示例:

<!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>
  </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;
      });
    </script>
  </body>
</html>

注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件

2 DOMContentLoaded (少用)

主要作用:

HTML 中的结构标签加载完毕就触发而无需等 CSS JS 图片 样式加载完毕

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载

代码示例:

<!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元素还没有开始加载
    //   这就是DOMContentLoaded和 load 的区别
    </script>
  </head>
  <body>
    <h1>大标题</h1>

    <script>

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

2 元素大小和位置 (三大家族)-scroll-offset-client

1 scroll 家族

使用场景:

我们想要页面滚动一段距离，比如100px，就让某些元素显示隐藏，那我们怎么知道，页面滚动了100像素呢？就可以使用scroll 来检测页面滚动的距离~~

注意:

1 获取dom元素内容的总宽高

dom.scrollWidth (宽) dom.scrollHeight (高)

获取这个元素的宽但是不包含滚动条滚动条的大小为 17 px

但是包含容器可以滚动的大小,会随内容撑开而撑开包含padding的左上下,没右

2 获取元素内容滚动的距离

dom.scrollTop (上距离) dom.scrollLeft (左距离)

这两个属性是可以读取,也可以修改的

能获取到这个元素里面的内容滚动位置只有数字没有单位

1649940194817

代码示例:

<!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>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .scroll-dom {
        width: 300px;
        height: 300px;
        background-color: aqua;
        border: 10px solid #000;
        /* padding: 100px; */
        /* padding-right: 100px;
        padding-bottom: 100px; */

        /* 滚动条 */
        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!
        <h1>1</h1>
        <h1>2</h1>
        <h1>3</h1>
        <h1>4</h1>
        <h1>5</h1>
        <h1>6</h1>
        <h1>7</h1>
        <h1>8</h1>
        <h1>9</h1>
        <h1>10</h1>
        <h1>11</h1>
        <h1>12</h1>
        <h1>13</h1>
        <h1>14</h1>
        <h1>15</h1>
        <h1>16</h1>
        <h1>17</h1>
        <h1>18</h1>
        <h1>19</h1>
        <h1>20</h1>
        <h1>21</h1>
        <h1>22</h1>
        <h1>23</h1>
        <h1>24</h1>
        <h1>25</h1>
        <h1>26</h1>
        <h1>27</h1>
        <h1>28</h1>
        <h1>29</h1>
        <h1>30</h1>
        <h1>31</h1>
        <h1>32</h1>
        <h1>33</h1>
        <h1>34</h1>
        <h1>35</h1>
        <h1>36</h1>
        <h1>37</h1>
        <h1>38</h1>
        <h1>39</h1>
        <h1>40</h1>
        <h1>41</h1>
        <h1>42</h1>
        <h1>43</h1>
        <h1>44</h1>
        <h1>45</h1>
        <h1>46</h1>
        <h1>47</h1>
        <h1>48</h1>
        <h1>49</h1>
        <h1>50</h1>
        <h1>51</h1>
        <h1>52</h1>
        <h1>53</h1>
        <h1>54</h1>
        <h1>55</h1>
        <h1>56</h1>
        <h1>57</h1>
        <h1>58</h1>
        <h1>59</h1>
        <h1>60</h1>
        <h1>61</h1>
        <h1>62</h1>
        <h1>63</h1>
        <h1>64</h1>
        <h1>65</h1>
        <h1>66</h1>
        <h1>67</h1>
        <h1>68</h1>
        <h1>69</h1>
        <h1>70</h1>
        <h1>71</h1>
        <h1>72</h1>
        <h1>73</h1>
        <h1>74</h1>
        <h1>75</h1>
        <h1>76</h1>
        <h1>77</h1>
        <h1>78</h1>
        <h1>79</h1>
        <h1>80</h1>
        <h1>81</h1>
        <h1>82</h1>
        <h1>83</h1>
        <h1>84</h1>
        <h1>85</h1>
        <h1>86</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>
     /* 
     注意:
      scrollWidth  不包含 滚动条 大小  
      scrollWidth   但是包含容器可以滚动的大小  包含padding的左上下,没右
       */
       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); // 获取当前容器的滚动距离
      });

      /* 
      总结  scroll家族
      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>

2 offset 家族

使用场景:

1650077458636

前面案例滚动多少距离，都是我们自己算的，最好是页面滚动到某个元素，就可以做某些事。简单说，就是通过js的方式，得到元素在页面中的位置这样我们可以做，页面滚动到这个位置，就可以返回顶部的小盒子显示

注意:

1 获取元素的宽高

dom . offsetWidth (宽) dom.offsetHeight (高)

获取元素可视区域宽高、包含元素自身设置的宽高、padding、border

元素设置多少宽高就是多少宽高包含滚动条的大小不会随内容撑开而撑开

2 获取元素距离自己定位父级元素的左、上距离

dom.offsetLeft (水平距离左) dom.offsetTop (垂直距离上)

**offsetLeft和offsetTop 是只读取属性 **

注意:必须是定位了的父元素,如果父元素没定位,那么会用就近原则往上继续找,再没有,就会根据页面来获取

1649941082412

代码示例:

<!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;
        /* border: 10px solid #000; */

        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">
          <h1>1</h1>
          <h1>2</h1>
          <h1>3</h1>
          <h1>4</h1>
          <h1>5</h1>
          <h1>6</h1>
          <h1>7</h1>
          <h1>8</h1>
          <h1>9</h1>
          <h1>10</h1>
          <h1>11</h1>
          <h1>12</h1>
          <h1>13</h1>
          <h1>14</h1>
          <h1>15</h1>
          <h1>16</h1>
          <h1>17</h1>
          <h1>18</h1>
          <h1>19</h1>
          <h1>20</h1>
          <h1>21</h1>
          <h1>22</h1>
          <h1>23</h1>
          <h1>24</h1>
          <h1>25</h1>
          <h1>26</h1>
          <h1>27</h1>
          <h1>28</h1>
          <h1>29</h1>
          <h1>30</h1>
          <h1>31</h1>
          <h1>32</h1>
          <h1>33</h1>
          <h1>34</h1>
          <h1>35</h1>
          <h1>36</h1>
          <h1>37</h1>
          <h1>38</h1>
          <h1>39</h1>
          <h1>40</h1>
          <h1>41</h1>
          <h1>42</h1>
          <h1>43</h1>
          <h1>44</h1>
          <h1>45</h1>
          <h1>46</h1>
          <h1>47</h1>
          <h1>48</h1>
          <h1>49</h1>
          <h1>50</h1>
          <h1>51</h1>
          <h1>52</h1>
          <h1>53</h1>
          <h1>54</h1>
          <h1>55</h1>
          <h1>56</h1>
          <h1>57</h1>
          <h1>58</h1>
          <h1>59</h1>
          <h1>60</h1>
          <h1>61</h1>
          <h1>62</h1>
          <h1>63</h1>
          <h1>64</h1>
          <h1>65</h1>
          <h1>66</h1>
          <h1>67</h1>
          <h1>68</h1>
          <h1>69</h1>
          <h1>70</h1>
          <h1>71</h1>
          <h1>72</h1>
          <h1>73</h1>
          <h1>74</h1>
          <h1>75</h1>
          <h1>76</h1>
          <h1>77</h1>
          <h1>78</h1>
          <h1>79</h1>
          <h1>80</h1>
          <h1>81</h1>
          <h1>82</h1>
          <h1>83</h1>
          <h1>84</h1>
          <h1>85</h1>
          <h1>86</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>
    </div>
    <script>
      const offsetDom = document.querySelector('.offset');

      // 获取宽度和高度  盒子设置多少宽高就是多少宽高 包含滚动条的大小 不会随内容撑开而撑开
      console.log(offsetDom.offsetWidth);// 300 
      console.log(offsetDom.offsetHeight);// 300

      // console.log(offsetDom.scrollWidth); // 283
      // console.log(offsetDom.scrollHeight);// 283 

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


      /* 
      总结 offset家族
      1 offsetWidth  获取元素的宽度 包含这滚动条
      2 offsetHeight 获取元素的高度 包含这滚动条

    注意:必须是定位了的父元素,如果父元素没定位,那么会用 就近原则 往上继续找,再没有,就会根据页面来获取
      3 offsetLeft 获取距离定位了的父元素的 水平距离 左 
      4 offsetTop 获取距离定位了的父元素的 垂直距离 上
       */
    </script>
  </body>
</html>

3 client 家族

注意:

1 获取元素宽高

dom . clientWidth (宽) dom . clientHeight (高)

获取元素的可视区域宽高不包含滚动条也不包含边框和padding

2 获取边框的宽度

dom . clientLeft (左边框) dom . clientTop (上边框)

注意:

只能获取左边框和上边框的宽度

clientLeft 和 clientTop 是只读属性

1649941845630

代码示例:

<!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>
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        .client{
            width: 300px;
            height: 300px;
            background-color: aqua;
            overflow: scroll;
            padding: 10px;
            border-left: 10px solid #000;
            border-top: 10px solid #000;
            /* border: 1px solid #000; */
        }
      </style>
</head>
<body>
    <div class="client">
        <h1>1</h1>
        <h1>2</h1>
        <h1>3</h1>
        <h1>4</h1>
        <h1>5</h1>
        <h1>6</h1>
        <h1>7</h1>
        <h1>8</h1>
        <h1>9</h1>
        <h1>10</h1>
        <h1>11</h1>
        <h1>12</h1>
        <h1>13</h1>
        <h1>14</h1>
        <h1>15</h1>
        <h1>16</h1>
        <h1>17</h1>
        <h1>18</h1>
        <h1>19</h1>
        <h1>20</h1>
        <h1>21</h1>
        <h1>22</h1>
        <h1>23</h1>
        <h1>24</h1>
        <h1>25</h1>
        <h1>26</h1>
        <h1>27</h1>
        <h1>28</h1>
        <h1>29</h1>
        <h1>30</h1>
        <h1>31</h1>
        <h1>32</h1>
        <h1>33</h1>
        <h1>34</h1>
        <h1>35</h1>
        <h1>36</h1>
        <h1>37</h1>
        <h1>38</h1>
        <h1>39</h1>
        <h1>40</h1>
        <h1>41</h1>
        <h1>42</h1>
        <h1>43</h1>
        <h1>44</h1>
        <h1>45</h1>
        <h1>46</h1>
        <h1>47</h1>
        <h1>48</h1>
        <h1>49</h1>
        <h1>50</h1>
        <h1>51</h1>
        <h1>52</h1>
        <h1>53</h1>
        <h1>54</h1>
        <h1>55</h1>
        <h1>56</h1>
        <h1>57</h1>
        <h1>58</h1>
        <h1>59</h1>
        <h1>60</h1>
        <h1>61</h1>
        <h1>62</h1>
        <h1>63</h1>
        <h1>64</h1>
        <h1>65</h1>
        <h1>66</h1>
        <h1>67</h1>
        <h1>68</h1>
        <h1>69</h1>
        <h1>70</h1>
        <h1>71</h1>
        <h1>72</h1>
        <h1>73</h1>
        <h1>74</h1>
        <h1>75</h1>
        <h1>76</h1>
        <h1>77</h1>
        <h1>78</h1>
        <h1>79</h1>
        <h1>80</h1>
        <h1>81</h1>
        <h1>82</h1>
        <h1>83</h1>
        <h1>84</h1>
        <h1>85</h1>
        <h1>86</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')
        // 获取宽度和高度  不包含 滚动条 也不包含边框和padding
        console.log(clientDom.clientWidth);// 不包含 滚动条（类似 scrollWidth）
        console.log(clientDom.clientHeight);// 不包含 滚动条（类似 scrollHeight）

        // 获取边框的大小
        console.log(clientDom.clientLeft);//左边框  1
        console.log(clientDom.clientTop);// 上边框  1

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

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

4 三大家族 - 总结

1650077488574

元素	作用
scrollWidth scrollHeight	获取元素的宽高,会被获取对象的内容撑开而变化
offsetWidth offsetHeight	获取元素可视区域宽高,包含滚动条的大小 ,不会随内容撑开而撑开
clientWidth clientHeight	获取元素的可视区域宽高不包含滚动条也不包含边框和padding

scrollLeft scrollTop	获取元素内的,内容滚动左上距离
offsetLeft offsetTop	获取元素与定位的父级元素左上距离
clientLeft clientTop	获取元素的边框左上宽度

3 屏幕适配事件- resize(window)

1 移动端屏幕适配 rem 淘宝js库，flexible.js 作用

2 响应式布局的时候发一个js文件方便根据当前页面的宽度告诉我们屏幕的种类和宽度

当屏幕发生变化是就会触发对应屏幕适配

也可以设置页面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>
</head>
<body>
    <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>

4 swiper-轮播图插件的使用

网站地址: 大量轮播图插件

www.swiper.com.cn/

1649948449721

  1 下载swiper对应的文件 - css + js 
  2 分布引入他们
  3 拷贝别人的固定结构
  4 拷贝写好的swiper 初始化js代码

步骤 1

先去网站下载你想要的 swiper 版本 , 推荐使用 swiper 7

1649943528557

步骤 2 .1

找到装 CSS JS 文件

1649943782917

步骤 2.2

解压好的文件夹里找到对应的 CSS JS 文件

1649943951160

步骤 3

在你要使用的 HTML 文件中复制过去

1649944353281

步骤 4

装上框架,里面也有教程

1649944710572

步骤 5

引入 JS 样式

1649944868703

步骤 6

其他 JS 样式以及查找方式

1649945097057

1649945417002

1649945530592

步骤 7

在 HTML 代码中引入对应的CSS JS 样式

1649945639716

代码示例:

<!-- 
  1 下载swiper对应的文件 - css + js 
  2 分布引入他们
  3 拷贝别人的固定结构
  4 拷贝写好的swiper 初始化js代码
 -->
<!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>
    <!-- css 引入 -->
    <link rel="stylesheet" href="./swiper/swiper-bundle.min.css">
    <style>
        .swiper {
          width: 600px;
          height: 300px;
        }   
    </style>
</head>
<body>
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="./assets/b_01(1).jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./assets/b_02(1).jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./assets/b_03(1).jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./assets/b_04(1).jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./assets/b_05(1).jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./assets/b_06(1).jpg" alt="">
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        
        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
    </div>
    <!-- JS 引入 -->
    <script src="./swiper/swiper-bundle.min.js"></script>
    <script>
         let  mySwiper = new Swiper ('.swiper', {
    // direction: 'vertical', // 垂直切换选项  默认是水平方向
    autoplay:true,//自动轮播设置

    loop: true, // 循环模式选项
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
            // 3d翻转
        //     effect: 'flip',
        // flipEffect: {
        //   slideShadows: true,
        //   limitRotation: true,
        // },
        effect: 'cards',
  })  
    </script>
</body>
</html>

5 延时器-setTimeout

延时器只会执行一次,他也会想定时器一样,有ID 也可以取消延时器

开始: setTimeout ( 函数 , 时间 )

取消: clearTimeout ( )

定时器和延时器的对比:

setInterval 的特征是重复执行，首次执行会延时定时器

setTimeout 的特征是延时执行，只执行 1 次延时器

setTimeout 结合递归函数，能模拟 setInterval 重复执行

clearTimeout 清除由 setTimeout 创建的定时任务

延时器-广告

代码示例:

<!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>
        .box{
            width: 400px;
            height: 400px;
            background-color: aqua;
            font-size: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        广告时间到,等待5秒...
    </div>
    <script>
 
    //    let num=5;
    //      document.querySelector('.box').innerHTML=` 广告时间到,等待${num}秒...`
    //    let time=setInterval(function(){
    //        num--
    //        document.querySelector('.box').innerHTML=` 广告时间到,等待${num}秒...`
    //    },1000)

       setTimeout(function(){
        document.querySelector('.box').style.display='none'
       },5000)
     
    
    </script>
</body>
</html>

6 递归

一个函数调用自己

使用场景:

有一个函数，可以打印出一个dom元素的所有祖先元素

不可能提前知道这个a标签有多少个父元素

这个函数接收一个参数，= dom

如果这个dom元素有父元素，就继续调用自己函数就可以一直查找自己的父级元素,直到没有

代码示例:

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

可以用递归将延时器实现和定时器一样的功能

案例示范:

<!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>
    <script>
        // 定时器 不主动清除  定时器永远执行下去
        // 延时器  只会执行一次

        // 延时器实现定时器功能

        // 在延时器里一次又一次开启延时器

        // 递归 自己调用自己  函数自己调用自己
       let  index=0;
        function func(){
            // ++index 可以更直观的看出递归效果
            console.log(++index);

            setTimeout(func,1000)
        }
        func()
    </script>
</body>
</html>

7 事件绑定-取消绑定

能绑定就能取消

注意:只能取消具名函数的绑定事件而匿名函数的绑定事件就取消不了

1 addEventListener 可以绑定多个同名事件

2 removeEventListener 可以取消对应的事件类型和事件处理函数

3 无法取消 addEventListener 事件对应的匿名函数

代码示例:

<!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>
    <button>点击我 输出时间</button>
    <script>
      const btn = document.querySelector('button');

      // // 普通函数
      function func() {
        console.log('2022-04-15 14:32:26');
      }
      function func2() {
        console.log("func2");
      }

      // 绑定事件
      btn.addEventListener('click', func);

      // addEventListener 可以绑定多个同名事件
      btn.addEventListener('click', func2);

      setTimeout(function () {
        // 取消这个事件绑定
        btn.removeEventListener('click', func);
      }, 5000);


      /* 
      1 addEventListener 可以绑定多个同名事件
      2 removeEventListener 可以取消对应的事件类型和事件处理函数

      3 无法取消 addEventListener 事件 对应的匿名函数 
      
       */

    //    const btn=document.querySelector("button");
       
    //    btn.addEventListener("click",function () {
    //      console.log("你好");
    //    })

      //  想要取消 这个 输出你好的行为  无法取消匿名函数的事件绑定
    //   btn.removeEventListener("click",???);

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

05-JS-web API-加载事件-三大家族-swiper插件使用-延时器-递归-事件取消绑定

05-JS-web API-加载事件-三大家族-swiper插件-延时器-递归-事件取消绑定

1 加载事件-load(常用)-DOMContentLoaded(少用)

1 load (常用)

主要作用:

代码示例:

2 DOMContentLoaded (少用)

主要作用:

代码示例:

2 元素大小和位置 (三大家族)-scroll-offset-client

1 scroll 家族

使用场景:

注意:

1 获取dom元素内容的总宽高

2 获取元素内容滚动的距离

代码示例:

2 offset 家族

使用场景:

注意:

1 获取元素的宽高

2 获取元素距离自己定位父级元素的左、上距离

代码示例:

3 client 家族

注意:

1 获取元素宽高

2 获取边框的宽度

代码示例:

4 三大家族 - 总结

3 屏幕适配事件- resize(window)

代码示例:

4 swiper-轮播图插件的使用

网站地址: 大量轮播图插件

步骤 1

步骤 2 .1

步骤 2.2

步骤 3

步骤 4

步骤 5

步骤 6

步骤 7

代码示例:

5 延时器-setTimeout

定时器和延时器的对比:

代码示例:

6 递归

使用场景:

代码示例:

可以用递归将延时器 实现和定时器一样的功能

7 事件绑定-取消绑定

代码示例:

可以用递归将延时器实现和定时器一样的功能