JavaScript
本地存储
1.sessionStorage
sessionStorage.setItem(k,value);
sessionStorage.getItem(k);
sessionStorage.removeItem(k);
sessionStorage.clear();
特点：
1. 数据只能在同一个页面中数据，不能跨页面访问
2. 页面关闭后数据随之销毁
3. 不属于持久性本地存储
4. 大小为5M
2.localStorage
localStorage.setItem(k,value);
localStorage.getItem(k);
localStorage.removeItem(k);
localStorage.clear();
特点：
1. 数据可以实现不同页面之间的相互访问
2. 数据需要手动删除，属于持久化存储
3. 大小为约20M
3. JSON.stringify
将对象转化为字符串格式
4.JSON.parse
将对象格式的字符串转化为对象
移动端事件介绍
-
touch事件类型
移动设备上无法使用鼠标，当手指按下屏幕的时候会触发 click,mousedown,mouseup事件，但是在移动设备上有专门的事件： touch 备注： 在移动端touch事件需要通过事件监听的方式添加 -
touch事件对象
-
手势封装
Swiper插件(库)
01-基本介绍
Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架，使用硬件加速过渡（如果该设备支持的话）。主要使用于移动端的网站、移动web apps，native apps和hybrid apps。主要是为IOS而设计的，同时，在Android、WP8系统也有着良好的用户体验，Swiper从3.0开始不再全面支持PC端。因此，如需在PC上兼容更多的浏览器，可以选择Swiper2.x（甚至支持IE7）。
https://www.swiper.com.cn/
02-基本使用
-
下载
-
网页中引用swiper.min.js和swiper.min.css文件
js文件和css文件都在 package 文件夹中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/swiper.min.css"> </head> <body> <script type="text/javascript" src="js/swiper.min.js"></script> </body> </html> -
设置基本的html结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/swiper.min.css"> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">slider1</div> <div class="swiper-slide">slider2</div> <div class="swiper-slide">slider3</div> </div> <!--该标签用来实现分页效果--> <div class="swiper-pagination"></div> <!--左箭头。如果放置在swiper-container外面，需要自定义样式。--> <div class="swiper-button-prev"></div> <!--右箭头。如果放置在swiper-container外面，需要自定义样式。--> <div class="swiper-button-next"></div> </div> <script type="text/javascript" src="js/swiper.min.js"></script> </body> </html> -
初始化插件
<script> var mySwiper = new Swiper('.swiper-container', { autoplay: true,//可选选项，自动滑动 }) </script> -
基本配置
direction : 'vertical' 竖向滚动 'horizontal' 横向滚动 speed: 300ms loop : true 循环播放 false 不循环 autoplay: true 自动播放 false 不播放 //分页器 //需要在html中添加对应的标签 pagination: { el: '.swiper-pagination', 点击分页器切换图片 clickable :true, }, //上一页,下一页 //需要在html中添加对应的标签 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', } -
更多操作可以查看API手册
文件读取
-
实现
1. 首先需要一个上传控件用来获取上传的文件 2. 点击上传按钮的时候通过onchange 3. 通过files获取上传文件 4. 创建读取器 new FileReader(); 5. 读取器中的方法，属性及事件 方法： readAsText(file) 读取成文本形式 readAsDataURL(file) 读取成文件路径形式 属性： reader.result 获取读取结果 事件： onload 当读取操作完成后 备注：获取读取结果的时候，一定要在读取操作结束后执行（在onload事件中完成）
多媒体操作
-
API
http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp canplay 事件 paused 播放状态 duration 获取总时长（秒） currentTime 当前播放时间（秒） play() 播放 pause() 暂停
如有不足，请多指教，
未完待续，持续更新！
大家一起进步！