<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>H5C3练习2</title> <style> .container{ width: 70% ; margin:0 auto; } .normalBorder{ border: 1px solid #ccc; padding: 10px 0; } </style> <script type="text/javascript" > window.onload = function (argument) { // body... var btnCheckOnline = document.querySelector("#btnCheckOnline"); btnCheckOnline.onclick = function(){ alert(navigator.onLine );} window.addEventListener("online", function () { alert("online"); }); //网络断开时会被调用 window.addEventListener("offline", function () { alert("offline"); }); } // localStorage.setItem("name","lxf"); localStorage.getItem("name") </script> </head> <body> <section class="container"> <header> <h1>H5第二天课程 练习</h1> </header> <section> <h3>1、网络状态</h3> <section> <p>在移动端，我们经常需要检测设置是在线还是离线，HTML5为此定义了一个navigator.onLine属性，这个属性用于检测设备是否联网。navigator.onLine 在不同浏览器中有细微的差别。</p> <p class="normalBorder">navigator.onLine返回用户当前的网络状况，是一个布尔值 1. 如果浏览器连不上网(包括局域网)，就是离线状态，也就是脱机状态，会返回false 2. 否则就是在线状态，返回true </p> <input type="button" value="检查网络状态" id="btnCheckOnline" > </section> <h3>2、监听网络变化 </h3> <section> <h4>为了更好的确定网络是否连接，HTML5还定义了两个事件，用于监听网络状态的变化。</h4> <p class="normalBorder"> //网络连接时会被调用 window.addEventListener("online", function () { alert("online"); }); //网络断开时会被调用 window.addEventListener("offline", function () { alert("offline"); }); </p> </section> <h3>地理位置</h3> <section> HTML5规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息。在获取地理位置之前，会询问用户，只有在获得许可之后，才能获取到用户的位置信息。 <pre class="normalBorder"> //successCallback:获取成功后会调用,并返回一个position对象，里面包含了地理位置信息<br> //获取失败了会调用，并返回error对象，里面包含了错误信息。<br> //获取当前的地理位置信息<br> navigator.geolocation.getCurrentPosition(successCallback, errorCallback)<br> //重复的获取当前的地理位置信息<br> navigator.geolocation.watchPosition(successCallback, errorCallback)<br> </pre> <h5>实例</h5> <pre class="normalBorder"> navigator.geolocation.getCurrentPosition(function(position){<br> // 定位成功会调用该方法 // position.coords.latitude 纬度<br> // position.coords.longitude 经度<br> // position.coords.accuracy 精度<br> // position.coords.altitude 海拔高度<br> }, function(error){<br> // 定位失败会调用该方法<br> // error 是错误信息<br> }); </pre> <h4>在iOS 10中，苹果对webkit定位权限进行了修改，所有定位请求的页面必须是https协议的。</h4> </section> <h3>web存储 localStorage和sessionStorage</h3> <section> <p>HTML5规范提出了解决方案，使用sessionStorage和localStorage存储数据。设置、读取、删除操作很方便</p> <h5> window.sessionStorage的特点</h5> <pre class="normalBorder"> 1. 声明周期为关闭浏览器窗口 2. 不能在多个窗口下共享数据。 3. 大小为5M </pre> <h5>window.localStorage的特点</h5> <pre class="normalBorder"> 1. 永久生效，除非手动删除 2. 可以多个窗口共享 3. 大小为20M </pre> <h5>window.sessionStorage与window.localStorage的方法</h5> <pre class="normalBorder"> setItem(key, value) //设置存储内容 getItem(key) //读取存储内容 removeItem(key) //删除键值为key的存储内容 clear() //清空所有存储内容 key(n) //以索引值来获取存储内容 </pre> </section> <h3>自定义播放器</h3> <section> 参考文档 http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp </section> </section> </section> </body> </html>