杂乱方法（动画案例、节流阀、页面存储）

一、案例-动画移动案例

 

  <script>
      window.addEventListener("load", function () {
        // 一.获取元素
        var cloud = document.querySelector(".cloud");
        var c_nav = document.querySelector(".c-nav");
        var lis = c_nav.querySelectorAll("li");
        // 二.给li绑定点击事件
        var current = 0; //作为筋斗云起始位置
        for (var i = 0; i < lis.length; i++) {
          // ---------------------------------------------
          // 1. 鼠标经过事件：移动到移动到的位置
          lis[i].addEventListener("mouseenter", function () {
            // 注意距离
            animate(cloud, this.offsetLeft);
          });

          // ---------------------------------------------

          //  2. 鼠标移除事件：回到起始位置
          //   当出现闪动效果时候注意一下层级关系或者绝对定位
          lis[i].addEventListener("mouseleave", function () {
            // 注意距离
            animate(cloud, current); //设置起始位置是0
          });

          // ---------------------------------------------

          //  3. 鼠标点击就把当前位置作为目标值
          lis[i].addEventListener("click", function () {
            // 注意距离
            // animate(cloud, this.offsetLeft);
            // 点击之后起始位置应该不是0；应该把起始位置改成停止的位置
            current = this.offsetLeft; //点击之后起始位置发生变化
          });
        }
      });
    </script>

• 页面分析：
  • 当鼠标移动到li上就会让背景移动到当前li后面，鼠标移开，背景恢复到第一个
  • 当鼠标点击之后，此时的背景就固定在当前li，鼠标移动到其他li，背景就是从当前li移动过去
• 代码解析
  • 布置静态页面：注意给引动动画的元素添加定位
  • 获取元素：获取所有会用到的元素，li利用全部获取方式
  • 设置背景元素初始位置
  • 鼠标经过：引用动画：动画引用元素是背景元素，移动距离是当前的鼠标左边距
  • 鼠标移除：引用动画，动画引用元素是背景元素，移动距离归零
  • 设置点击：背景就会把默认位置值改成当前位置

二、节流阀 

flag = true / false

利用回调函数，添加一个变量来控制，锁住函数和解锁函数

因为连续点击事件会出现加速屏闪效果

使用流程

1. 先声明一个变量flag=true
2. 判断如果不是则赋值为false，并执行其他事件
3. 关闭阀：if（flag）{flag = false,do something}
4. 打开阀：flag = true

            if (flag == true) {
            flag = false;
              // 如果到最后一个克隆图，把ul的left归0
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, - num * facusWidth, function () {
                flag = true;
            });

• 节流阀打开表示正常执行函数
• 这里先关闭节流阀：操作ul的位移之后再打开
• 解决了ul在移动中连续点击时候出现的屏闪

三、页面存储

1. sessionStorage 

生命周期：关闭浏览器窗口

• 存储数据：sessionStorage setItem（‘name’，输入值）
• 获取数据：sessionStorage getItem（‘name’）
• 删除数据：sessionStorage removeItem（‘name’）
• 清除数据：sessionStorage clearItem（）

    <input type="text" />
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>
    <script>
      var input = document.querySelector("input");
      var set = document.querySelector(".set");
      var get = document.querySelector(".get");
      var remove = document.querySelector(".remove");
      var del = document.querySelector(".del");
      //   1.点击存储
      set.addEventListener("click", function () {
        // 点击之后存储表单值
        var value = input.value;
        sessionStorage.setItem("uname", value);
        // 此处存储数据可以使用数组对象那个存储多个数据
        sessionStorage.setItem("pwd", value);
      });
      //   2. 点击获取
      get.addEventListener("click", function () {
        // 点击之后获取表单元素
        console.log(sessionStorage.getItem("uname"));
      });
      //   3.点击删除
      remove.addEventListener("click", function () {
        // 点击之后删除表单元素
        sessionStorage.removeItem("uname");
      });
      //   4.清除数据
      del.addEventListener("click", function () {
        // 点击之后清除表单元素
        sessionStorage.clear();
      });
    </script>

 

2. localStorage 

生命周期永久生效，除非手动删除

可以多窗口页面共享（同一浏览器共享）

• 存储数据：localStorage setItem（‘name’，输入值）
• 获取数据：localStorage getItem（‘name’）
• 删除数据：localStorage removeItem（‘name’）
• 清除数据：localStorage clearItem（）

<input type="text" />
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>

    <script>
      var input = document.querySelector("input");
      var set = document.querySelector(".set");
      var get = document.querySelector(".get");
      var remove = document.querySelector(".remove");
      var del = document.querySelector(".del");
      // 1.建立
      set.addEventListener("click", function () {
        var val = input.value;
        localStorage.setItem("username", val);
      });
      // 2.获取
      get.addEventListener("click", function () {
        console.log(localStorage.getItem("username"));
      });
      // 3.删除
      remove.addEventListener("click", function () {
        localStorage.removeItem("username");
      });
      // 4.清除
      del.addEventListener("click", function () {
        localStorage.clear();
      });
    </script>