JS篇：比较详细的JS知识点--04

最新推荐文章于 2024-04-23 11:37:57 发布

飞驰人生@1

最新推荐文章于 2024-04-23 11:37:57 发布

阅读量256

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_61482485/article/details/132471725

版权

1、移动端事件

常见的移动端事件：

touchstart：手指触摸屏幕时触发的事件。
touchmove：手指在屏幕上滑动时触发的事件。
touchend：手指离开屏幕时触发的事件。

touchcancel：触摸事件被取消时触发的事件，例如手指触摸过程中突然有新的元素遮挡住了触摸点。
tap：类似于点击事件，在手指触摸屏幕后迅速离开时触发的事件。
swipe：手指在屏幕上迅速滑动时触发的事件，可以判断滑动的方向。
pinch：手指在屏幕上捏合或展开时触发的事件，常用于实现缩放效果。
orientationchange：设备的方向（横向或纵向）发生变化时触发的事件。
shake：设备被摇晃时触发的事件。
scroll：触摸内容滚动时触发的事件。

代码演示：

    <div></div>
    <script>
      window.addEventListener("load", function () {
        var div = document.querySelector("div");
        div.addEventListener("touchstart", function (e) {
          console.log("触摸了");
          /* 
                touches正在触摸屏幕的所有手指的列表
                targetTouches正在触摸当前dom元素的所有手指的列表
                changedTouches手指状态发生变化的列表，从无到有，从有到无
                */
          console.log(e);
          console.log(e.touches);
          console.log(e.targetTouches[0]);
          console.log(e.targetTouches);
          console.log(e.changedTouches);
        });

        div.addEventListener("touchmove", function (e) {
          console.log("触摸了并移动了");
          console.log(e);
          console.log(e.touches);
          console.log(e.targetTouches);
          console.log(e.changedTouches);
        });

        div.addEventListener("touchend", function (e) {
          console.log("触摸了并移走了");
          console.log(e);
          console.log(e.touches);
          console.log(e.targetTouches);
          console.log(e.changedTouches);
          // 移走之后的触摸事件对象的length是0
        });
      });
    </script>

案例：设置手指拖动元素

    <div
      style="
        width: 50px;
        height: 50px;
        background-color: pink;
        position: absolute;
      "
    ></div>
    <script>
      window.addEventListener("load", function () {
        var div = document.querySelector("div");
        var pagex = 0;
        var pagey = 0;
        var x = 0;
        var y = 0;
        div.addEventListener("touchstart", function (e) {
          pagex = e.targetTouches[0].pageX;
          pagey = e.targetTouches[0].pageY;
          x = this.offsetLeft;
          y = this.offsetTop;
        });
        div.addEventListener("touchmove", function (e) {
          // 因为鼠标移动过程中坐标是一直变化的，所以不需要用动态函数
          pagemovex = e.targetTouches[0].pageX - pagex;
          pagemovey = e.targetTouches[0].pageY - pagey;
          this.style.left = pagemovex + x + "px";
          this.style.top = pagemovey + y + "px";
          e.preventDefault();
        });
      });
    </script>

2、给元素动态添加类名的方式

        classList属性
        classList属性是html5新增的一个属性，返回元素的类名，但是ie10以上版本支持，
        该属性用于在元素中添加。移除和切换css类，有以下方法：
        添加类：element.classList.add('类名');
        例如：focus.classList.add('one');往focus这个元素中添加了one类

        移除类：element.classList.remove('类名');
        移除元素中存在的类名，例如:focus.classList.remove('one')移除focus元素中的one类

        切换类：element.classList.toggle('类名');
        切换类是在当元素中是否存在这个类名，只要css中有定义了此类名就可以使用
        例如: 假如已经在css3中定义了one类，使用：focus.classList.toggle('one')；

3、swiper移动端轮播图

Swiper演示 - Swiper3|Swiper中文网

接上上面的bootstrap案例都在gitHub上：GitHub - xhnssgusni/CSDNContext

4、自定义移动端轮播图

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .fa-box {
      width: 300px;
      height: 200px;
      background-color: red;
      position: absolute;
      top: 100px;
      left: 50%;
      transform: translateX(-50%);
      overflow: hidden;
    }

    .box {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
    }

    .child {
      width: 300px;
      height: 200px;
    }

    .first {
      background-color: pink;
    }

    .second {
      background-color: skyblue;
    }

    .third {
      background-color: lightgreen;
    }

    ul.test {
      position: absolute;
      bottom: 8px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
    }

    li {
      list-style: none;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #fff;
      margin: 0 4px;
    }

    button {
      outline: none;
      border: 0;
      width: 20px;
      height: 30px;
      color: #fff;
      font-size: 18px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(0, 0, 0, 0.3);
    }

    .left {
      left: 0;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }

    .right {
      right: 0;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }

    .active {
      background-color: #999;
    }
  </style>
  <body>
    <div class="fa-box">
      <div class="box">
        <div class="child first"></div>
        <div class="child second"></div>
        <div class="child third"></div>
      </div>
      <ul class="test"></ul>
      <button class="left">></button>
      <button class="right"><</button>
    </div>
    <script>
      window.addEventListener("load", function () {
        const fBox = document.querySelector(".fa-box");
        const button = document.querySelectorAll("button");

        // 渲染小圆点
        const ul = document.querySelector("ul.test");
        const child = document.querySelectorAll(".child");
        const box = document.querySelector(".box");
        for (let i = 0; i < child.length; i++) {
          const li = document.createElement("li");
          ul.appendChild(li);
          li.setAttribute("data-index", i);
        }
        ul.children[0].classList.add("active");

        // 克隆一张图片
        const first = box.children[0].cloneNode(true);
        box.appendChild(first);

        function setPliBackgroundColor(pIndex) {
          for (let i = 0; i < pli.length; i++) {
            pli[i].classList.remove("active");
          }
          pli[pIndex].classList.add("active");
        }

        function changePage(num) {
          if (num == 0) {
            if (index == 3) {
              index = 0;
              box.style.transform =
                "translateX(" + -index * fBox.offsetWidth + "px)";
              box.style.transition = "";
            }
            if (pIndex == 2) {
              pIndex = -1;
            }
            index++;
            pIndex++;
            setPliBackgroundColor(pIndex);
            box.style.transform =
              "translateX(" + -index * fBox.offsetWidth + "px)";
            box.style.transition = "all .3s";
          } else {
            if (index == 0) {
              index = 3;
              box.style.transform =
                "translateX(" + -index * fBox.offsetWidth + "px)";
              box.style.transition = "";
            }
            if (pIndex == 0) {
              pIndex = 3;
            }
            index--;
            pIndex--;
            setPliBackgroundColor(pIndex);
            box.style.transform =
              "translateX(" + -index * fBox.offsetWidth + "px)";
            box.style.transition = "all .3s";
          }
        }

        function setTimer() {
          this.addEventListener("touchend", function () {
            setTimeout(() => {
              timer();
            }, 2000);
          });
        }

        // 点击小圆点切换
        let index = 0;
        let pIndex = 0;
        const pli = ul.querySelectorAll("li");
        for (let i = 0; i < pli.length; i++) {
          pli[i].addEventListener("touchstart", function () {
            clearInterval(window.timer);
            index = this.getAttribute("data-index");
            pIndex = index;
            setPliBackgroundColor(pIndex);
            box.style.transform =
              "translateX(" + -index * fBox.offsetWidth + "px)";
            box.style.transition = "all .3s";
            setTimer();
          });
        }

        button[0].addEventListener("touchstart", function () {
          clearInterval(window.timer);
          changePage(0);
          setTimer();
        });

        button[1].addEventListener("touchstart", function () {
          clearInterval(window.timer);
          changePage(1);
          setTimer();
        });

        timer();
        function timer() {
          // 清除上次的定时器
          clearInterval(window.timer);
          // 开启新的定时器
          window.timer = setInterval(() => {
            changePage(0);
          }, 1000);
        }
      });
    </script>
  </body>
</html>

5、图像的模糊处理

图像的模糊处理
<!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: 400px;
        height: 255px;
        margin: 100px auto;
      }

      img {
        width: 100%;
        height: 100%;
        filter: blur(5px);
      }

      img:hover {
        filter: blur(0);
      }
    </style>
  </head>

  <body>
    <div><img src="../images/bl1.jpg" alt="" /></div>
  </body>
</html>

6、本地存储和会话存储

目标：
写出sessionStorage数据的存储以及获取
写出locaklStorage数据的存储以及获取
说出两者的区别

学习目标：
window.sessionStorage（会话存储空间）

1、生命周期为关闭浏览器窗口
2、在同一个窗口（页面）下数据可以共享
3、以键值对的形式存储使用

存储数据：
sessionStorage.setItem(key, value);

获取数据
sessionStorage.getItem(key);

删除数据
sessionStorage.removeItem(key);

一次性删除所有数据
sessionStorage.clear();

window.localStorage（本地存储空间）

1、生命周期永久生效，除非手动删除，否则关闭浏览器和页面后数据都还是存在
2、可以在同一个浏览器的不同窗口共享数据
3、以键值对的形式存储使用

存储数据：
localStorage.setItem(key, value);

获取数据
localStorage.getItem(key);

删除数据
localStorage.removeItem(key);

一次性删除所有数据
localStorage.clear();


随着互联网的发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足各种各样的需求，会经常性的
在本地存储大量的数据，html5规范提出了相关解决方案

本地存储特性：
1、数据存储在用户浏览器中
3、设置、读取方便、甚至页面刷新不丢失数据
3、容量较大、sessionStorage约5m, localStorage约20m
4、只能存储字符串、可以将对象JSON.stringify()编码后存储
5、获取本地存储中的数据，可以转换成JSON.parse()

扩展：

change改变事件
当用户更改 < input >、<select>和<textarea> 元素的值并提交这个更改时，
change 事件在这些元素上触发。和 input 事件不一样，change 事件并不是每次元素的 value 改变时都会触发。

JS知识点差不多，JS开源库JQuery前往CSDN