网络状态监测
window.online 用户连接时触发该事件；window.offline 用户断开连接时触发该事件；
文件读取
FileReader对象 <body> //页面结构很简单，一个img用于显示图片，一个file用于上传图片，一个button用来点击； <input type="file"> <button>显示图片</button> <img src="" alt=""> <script> //获取元素 var file=document.querySelector('input'); var button=document.querySelector('button'); var img=document.querySelector('img'); //点击按钮后触发事件 button.οnclick=function(){ var reader=new FileReader(); //创建一个fileReader对象； reader.readAsDataURL(file.files[0]); //获取元素中上传的文件， //file.files是一个数组，包含了上传的文件的全部信息； reader.οnlοad=function(){ //文件读取完成之后触发事件； console.log(reader.result); img.src=reader.result; //读取的内容保存在了reader.result属性里，赋值给img.src； } } </script> </body>参考资料https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader#toc
视频API
方法： load() 加载； play() 播放； pause() 暂停；属性： currentTime 视频播放的当前进度； duration:视频的总时间；事件： oncanplay: 事件在用户可以开始播放视频/音频（audio/video）时触发； ontimeupdate: 通过该事件来报告当前的播放进度，视频播放时不断的触发； onended: 播放完时触发；全屏： video.webkitRequestFullScreen();
拖拽事件
分为两种，第一种是拖拽元素，在元素中添加属性draggable="true"，即可成为拖拽元素；第二种是目标元素；1、对于拖拽元素 ondrag 应用于拖拽元素，整个拖拽过程都会调用； ondragstart 应用于拖拽元素，当拖拽开始时调用； ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用； ondragend 应用于拖拽元素，当拖拽结束时调用；2、对于目标元素 ondragenter 应用于目标元素，当拖拽元素进入时调用； ondragover 应用于目标元素，当停留在目标元素上时调用； ondrop 应用于目标元素，当在目标元素上松开鼠标时调用； ondragleave 应用于目标元素，当鼠标离开目标元素时调用；
Web存储
大致分为三种：cookie、sessionStorage、localStorage; 1、cookie存储； 缺点：存储量较小，仅4K，存储数据时进行了加密，解析复杂； 2、sessionStorage，会话存储，打开一个URL——→关闭页面 ——→即为一个会话； 生命周期：从打开浏览器开始到关闭浏览器结束； 主要存放一些小容量的临时数据，同一窗口下数据共享； 容量：5M； 3、localStorage，本地存储； 永久存在，除非手动删除； 可以多个窗口共享数据； 容量：20M；方法： setItem(key, value) 设置存储内容 getItem(key) 读取存储内容 removeItem(key) 删除键值为key的存储内容 clear() 清空所有存储内容 key(n) 以索引值来获取存储内容 eg: window.sessionStorage.setItem('name','张飞'); window.sessionStorage.clear();
缓存清单CACHE
离线存储，HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个cache manifest文件。manifest格式：新建文件，名称为demo.appcache，以下为格式；
CACHE MANIFEST CACHE: img1.jpg #指定我们需要缓存的静态资源，如.css、image、js等 NETWORK: * #指定需要在线访问的资源，可使用通配符 FALLBACK: one.css two.css #当前页面无法访问时退回的页面(回退;后退)， #在这里，找不到one.css将会使用two.css取代；
优势： 1、可配置需要缓存的资源； 2、网络无连接时应用仍然可用； 3、本地读取缓存资源，提升访问速度，增强用户体验； 4、减少请求，缓解服务器负担；tips:chrome 可以通过chrome://appcache-internals/工具和离线（offline）模式来调试管理应用缓存
地理定位
window.navigator.geolocationnavigator.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息； 获取成功时调用的函数，失败时的函数，用options可调整位置信息数据收集方式；navigator.watchPosition(successCallback, errorCallback, options) 重复获取当前地理信息；position.coords.latitude纬度；position.coords.longitude经度；speedNaN 速度；accuracy 精度，98；
1104
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
