触屏事件
移动端浏览器兼容性较好，无需考虑JS兼容问题，但是移动端也有自己独特之处，比如触屏事件touch?（也称触摸事件）Android和IOS都有
touch对象代表一个触摸点 ，触屏事件可响应用户手指（或触控笔）对屏幕或触控板操作
?触摸事件对象（TouchEvent）
TouchEvent描述手指在触摸平面的状态变化的事件，用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少
移动端轮播图
移动端轮播图功能和PC端基本一致
- 可以自动播放图片
- 手指可以拖动播放轮播图
功能实现
一、自动播放功能
- 开启定时器
- 移动端移动，使用translate
- 要想图片优雅的移动，添加过渡
二、无缝滚动
- 我们判断条件要等到图片滚动完再去判断，就是过渡完之后
- 此时需要添加检测过渡完成事件 transitionend
- 判断条件：如果索引号等于最后一张图片，此时索引号复原为0
- 此时图片去掉过渡效果，然后移动
- 如果索引号小于0，说明是倒着走，索引号为最后一张图片
- 此时图片去掉过渡然后移动
三、小圆点跟随变化效果
- 把 ol 里面 li 带有current类名的选出来去掉类名 remove
- 让当前索引号的小 li 加上current add
- 但是 ， 是等过渡结束之后变化 ， 所有这个写到 transitionend 事件里面
四、手指滑动轮播图
- 本质就是 ul 跟随手指移动 ， 就是移动端拖动元素
- 触摸元素 touchstart：获取手指初始坐标
- 移动手指 touchmove： 计算手指移动距离 ， 并且移动盒子
- 离开手指 touchend：根据滑动的距离分不同的情况
- 如果移动距离小于某个像素，就回弹原来位置
- 如果移动距离大于某个像素，就上一张下一张滑动
五、返回顶部
- 当页面滚动到某个部位就显示，否则隐藏
- 点击可以返回顶部
- 事件：scroll 页面滚动事件
- 如果被卷去的头部（window . pageYOffset）大于某个数值
- 点击window . scroll(0,0) 返回顶部
classList属性
是H5新增的一个属性，返回元素的类名 ie10以上支持，可以在元素中添加，移除，切换CSS类
添加类：
element . classList . add（‘类名’）? ? ? （在后面追加类，不会覆盖前面的类名，注意前面无需加.）
移除类：
element . classList . remove（‘移除类名’）
切换类：
element . classList . toggle（‘类名’）
click延时解决方案
移动端click事件会有 300ms 的延时 ， 原因是移动端屏幕双击会缩放页面
- 禁用缩放功能
- 利用touch事件自己封装这个事件解决300s延迟
- ?原理：当手指触摸屏幕 ， 记录当前触摸时间
- 手指离开屏幕 ， 用离开时间减去触摸时间
- 如果时间小于150ms 并且没有滑动过屏幕 ， 那就定义为点击
- ?使用插件
本地存储
特性：
- 数据存储在用户浏览器中
- 设置、读取方便、页面刷新不丢失数据
- 容量大
- 只能存储字符串 ， 可将对象JSON . stringify（）编码后存储
window.sessionStorage
- 生命周期为关闭浏览器窗口
- 在同一个窗口下数据可以共享
- 以键值对的形式存储
存储数据：
sessionStorage.setltem(key,value)获取数据
sessionStorage.getItem(key)删除数据
sessionStorage.removeItem（key）删除所以数据
sessionStorage.clear（）window.localStorage
- 生命周期永久有效 ， 除非手动删除
- 可以多窗口共享
- 以键值对的形式存储
存储数据
localStorage.setitem(key,value)
获取数据
localStorage.getItem（key）删除数据
localStorge.removeItem（key）删除所有数据
localStorage.clear（）