H5 Day2 练习
<!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>
H5 Day2 练习的更多相关文章
- 旺财速啃H5框架之Bootstrap（五）
在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...
- 旺财速啃H5框架之Bootstrap（四）
上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...
- H5单页面手势滑屏切换原理
H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...
- 快速构建H5单页面切换骨架
在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...
- 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
- 旺财速啃H5框架之Bootstrap（三）
好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...
- H5程序员如何利用cordova开发跨平台应用
什么是Cordova? Cordova以前也叫PhoneGap,它提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等.Cordova还 ...
- H5项目开发分享——用Canvas合成文字
以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...
- 【从零开始学BPM，Day2】默认表单开发
[课程主题]主题:5天,一起从零开始学习BPM[课程形式]1.为期5天的短任务学习2.每天观看一个视频,视频学习时间自由安排. [第二天课程] Step 1 软件下载:H3 BPM10.0全开放免费下 ...
随机推荐
- [Latex] 所有字体embedded： Type3 PDF文档处理 / True Type转换为Type 1
目录: [正文] Adobe Acrobat打印解决字体嵌入问题 [Appendix I] Type3转TRUE Type/Type 1 [Appendix II] TRUE Type转Type 1 ...
- 企业落地Kubernetes的问题与对策
在当今云计算领域,“容器技术”已经从三四年前的炒作期正式进入了产业落地期,而Kubernetes作为容器平台的标准已经得到了广泛应用. Kubernetes从2014年6月由Google宣布开源,到2 ...
- 修改servlet的模板代码
实际开发中,这些生成的代码和注释一般我们都用不到的,每次都要手工删除这些注释和代码,很麻烦.下面以MyEclipse 2014(其实版本通用的,都可以修改)为例进行说明如何修改Servlet的模板代码 ...
- Thymeleaf 学习笔记
(一)Thymeleaf 是个什么? 简单说, Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP .相较与其他的模板引擎,它有如下三个极吸引 ...
- beta3
吴晓晖(组长) 过去两天完成了哪些任务 一些细节的debug,部分优化,算法中有关记录的部分 展示GitHub当日代码/文档签入记录 接下来的计划 推荐算法 还剩下哪些任务 组员:刘帅珍 过去两天完成 ...
- jvm垃圾回收机制和常见算法
这是朋友给的面试题里边的,具体地址已经找不到,只能对原作者说声抱歉了: 理论上来讲sun公司只定义了垃圾回收机制规则,而步局限于其实现算法,因此不同厂商生产的虚拟机采用的算法也不尽相同. GC(Gar ...
- java 封装，继承，多态基础
什么是封装? 1,对象数据和在.操作该对象的指令都是对象自身的一部分,能够实现尽可能对外部隐藏数据. 2,实际项目开发中,使用封装最多的就是实体类. 什么是继承? 1,继承是面向对象程序设计能提高效率 ...
- layout图形化界面看不到内容 Failed to find the style corresponding to the id
1.问题 在创建新的工程的时候,选择目标SDK为api21,编译SDK为api23.创建出来的layout文件图形化界面中看不到,并且报错: Failed to find the style corr ...
- OneZero第四周第四次站立会议（2016.4.14）
1. 时间: 15:00--15:10 共计10分钟. 2. 成员: X 夏一鸣 * 组长 (博客:http://www.cnblogs.com/xiaym896/), G 郭又铭 (博客:http ...
- confluence
Confluence Confluence是一个专业的wiki程序.它是一个知识管理的工具,通过它可以实现团队成员之间的协作和知识共享. Confluence不是一个开源软件,非商业用途可以免费使用. ...