357节---------7月2日---------JS结束

动画

动画原理

核心原理：通过定时器setlnterval()不断移动盒子位置

实现步骤：

1. 获取盒子当前的位置
2. 让盒子在当前位置加上1个移动距离
3. 利用定时器不断重复这个操作
4. 加一个结束定时器的条件
5. 注意此元素需要添加定位，才能使用element.style.left

---

动画函数的封装

注意函数需要传递2个参数，动画对象和移动到的距离（即object和target ）

可以给不同元素记录不同定时器

当我们不断点击按钮，这个元素的速度会越来越快，因为开启了太多定时器。结局方法就是，在代码中添加“clearInterval()”，让元素只有一个定时器，即清除以前的定时器，只保留当前的一个定时器执行

---

缓动动画原理

缓动动画公式：（目标值 - 现在的位置）/10 ，将此作为每次移动的距离（步长）

如：

var step = (target - obj.offsetLeft) / 10;

停止条件是：让当前盒子位置等于目标位置就停止定时器

缓动动画多个目标值之间移动

• 步长为+，向上取整，math.ceil；
• 步长为-，向下取值math.floor

缓动动画添加回调函数

回调函数原理：将这个函数作为参数传到另一个函数里，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。

回调函数写的位置：定时器结束的位置

---

动画函数的使用

将动画函数封装到单独JS文件里面

---

节流阀

防止轮播图按钮连续点击造成播放过快

节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发

var flag = true;
if(flag){
    flag = false;
    do sth;
}//关闭水龙头

flag=true;//开启水龙头

---

移动端动态效果

触屏事件

触屏事件	说明
touchstart	手指触摸到一个DOM元素时触发
touchmove	手指在一个DOM元素上滑动时触发
touchend	手指从一个DOM元素上移开时触发

---

触摸事件对象

触摸列表	说明
touches	正在触摸屏幕的所有手指的一个列表
targetTouches	正在触摸当前DOM元素上的手指的一个列表
changedTouches	手指状态发生了改变的列表，从无到有，从有到无变化

当我们的手指离开屏幕时，就没有了touches和targetTouches列表，但是会有changedTouches

重点记住targetTouches

---

移动端拖动元素

• touchstart、touchmove、touchend可以实现拖动元素
• 但是拖动元素需要当前手指的坐标值我们可以使用targetTouches[0]里面的pageX和pageY
• 移动端拖动的原理：手指移动中，计算出手指移动的距离。然后用盒子原来的位置+手指移动的距离
• 手指移动的距离：手指滑动中的位置减去手指钢刚开始触摸的位置

拖动元素三部曲

1. 触摸元素touchstart：获取手指初始坐标，同时获得盒子原来的位置
2. 移动手指touchmove：计算手指的滑动距离，并且移动盒子
3. 离开手指touchend；

注意：手指移动也会触发滚动屏幕，所以这里要阻止默认的屏幕滚动e.preventDefault（）；

---

移动端常用开发插件

fastclick.js

解决延时问题

引用插件：<script type = ' application / javascript '  src= ' / path / to / fastclick.js ' > </script>

语法格式：

if ('addEventListener'in document){
    document.addEventListener('DOMContentLoaded',function(){
        Fastclick.attach(document.body);
    }false);

Swiper.js

文件准备：下载过后，在dist文件中找到引用文件css和js，直接选中文件拖拽到VScode就行

引用文件：

• 引入swipercss文件：<link rel="stylesheet"href="css/swiper.min.css">
• 引入swiper js文件：<script src="js/swiper.min.js"></script>

语法格式：

打开想用的文件，F12，依次复制粘贴html、css、js文件

用法总结：

• 打开demo实例文件，查看需要入的相关文件，并且引入
• 复制demo实例文件中的结构html,样式css以及js代码

---

移动端常用开发框架

框架，顾名思义就是一套架构，它会基于自身的特点，向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。

---

本地存储

本地存储特性：

• 数据存储在用户浏览器中
• 设置、读取方便、甚至页面刷新不丢失数据
• 容量较大、sessionStorage约5M、localStorage约20M
• 只能存储字符串，可以将对象JSON.stringify()编码后存储

---

window.sessionStorage

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

sessionStorage.setItem(key,value);

• 获取数据：

sessionStorage.getItem(key);

• 删除数据：

sessionStorage.removeItem(key);

• 删除所有数据

sessionStorage.clear();

---

 window.localStorage

• 生命周期永久生效，除非手动删除否则关闭页面也会存在
• 可以多窗口（页面）共享（同一浏览器可以共享）
• 以键值对的形式存储使用
• 存储数据：

localStorage.setltem(key,value)

• 获取数据：

localStorage.getltem(key)

• 删除数据：

localStorage.removeltem(key)

• 删除所有数据：

localStorage.removeltem(key)