JavaScript
Local storage
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
将对象格式的字符串转化为对象
Introduction to mobile events
-
touch event type
移动设备上无法使用鼠标，当手指按下屏幕的时候会触发 click,mousedown,mouseup事件，但是在移动设备上有专门的事件： touch 备注： 在移动端touch事件需要通过事件监听的方式添加 -
touch event object
-
Attributes
-
Event object.touches [Finger list on the screen]
☞ touches 用来获取位于屏幕上的手指信息【手指个数】 -
Event object.targetTouches[List of fingers located on the element]
☞ 用来获取当前点击元素时候，手指信息【手指个数,手指唯一标识ID】 -
Event object.changedTouches[Information when the finger leaves the screen, use this property in the touchend event to get the finger list]
☞ changedTouches 用来获取当手指离开屏幕时候的手指信息，一般在touchend事件中使用该属性获取手指信息
-
-
Finger position
-
Finger object. clientX/Y The horizontal/vertical distance of the finger relative to the viewport [refer to the visible area]
-
Finger object. pageX/Y The finger is equivalent to the horizontal/vertical distance of the viewport [if there is a scroll bar, including the distance after the scroll bar is scrolled]
-
-
click delay
1. click 比 touch 延时约300毫秒 【时间不标准】
-
-
Gesture package
Swiper plugin (library)
01-Basic introduction
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-Basic use
-
download
-
Swiper.min.js and swiper.min.css files are referenced in the web page
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> -
Set up the basic html structure
<!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> -
Initialize the plugin
<script> var mySwiper = new Swiper('.swiper-container', { autoplay: true,//可选选项，自动滑动 }) </script> -
basic configuration
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', } -
For more operations, please check the API manual
File reading
-
achieve
1. 首先需要一个上传控件用来获取上传的文件 2. 点击上传按钮的时候通过onchange 3. 通过files获取上传文件 4. 创建读取器 new FileReader(); 5. 读取器中的方法，属性及事件 方法： readAsText(file) 读取成文本形式 readAsDataURL(file) 读取成文件路径形式 属性： reader.result 获取读取结果 事件： onload 当读取操作完成后 备注：获取读取结果的时候，一定要在读取操作结束后执行（在onload事件中完成）
Multimedia operation
-
API
http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp canplay 事件 paused 播放状态 duration 获取总时长（秒） currentTime 当前播放时间（秒） play() 播放 pause() 暂停
If there are any shortcomings, please advise, to
be continued, continue to update!
Make progress together!