<!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 练习的更多相关文章

  1. 旺财速啃H5框架之Bootstrap（五）

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  2. 旺财速啃H5框架之Bootstrap（四）

    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...

  3. H5单页面手势滑屏切换原理

    H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...

  4. 快速构建H5单页面切换骨架

    在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...

  5. 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  6. 旺财速啃H5框架之Bootstrap（三）

    好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...

  7. H5程序员如何利用cordova开发跨平台应用

    什么是Cordova? Cordova以前也叫PhoneGap,它提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等.Cordova还 ...

  8. H5项目开发分享——用Canvas合成文字

    以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...

  9. 【从零开始学BPM，Day2】默认表单开发

    [课程主题]主题:5天,一起从零开始学习BPM[课程形式]1.为期5天的短任务学习2.每天观看一个视频,视频学习时间自由安排. [第二天课程] Step 1 软件下载:H3 BPM10.0全开放免费下 ...

随机推荐

  1. python3 subprocess模块

    当我们在执行python程序的时候想要执行系统shell可以使用subprocess,这时可以新起一个进程来执行系统的shell命令,python3常用的有subprocess.run()和subpr ...

  2. Win环境 Android Studio使用Git 教程 ( 生成SSH key )

    Github和码云都提供SSH协议,即用户可以用公钥认证方式连接到码云的SSH服务器.这就需要生成并部署SSH Key.下面就是我生成SSH Key的步骤,希望有所帮助: Git生成SSH key 在 ...

  3. keycode值对照表

    转载自:https://segmentfault.com/a/1190000005828048 字母和数字键的键码值(keyCode) 按键 键码 按键 键码 按键 键码 按键 键码 A 65 J 7 ...

  4. ats显示代理缓存

    如果要将ats用作显示代理缓存,则必须配置客户端软件(即浏览器)以将请求直接发送到ats. 如果没有将ats配置为使用透明度选项(通过交换机或路由器在路由到源服务器的情况下拦截客户端请求并重新路由到a ...

  5. 新手向：从不同的角度来详细分析Redis

    最近对华为云分布式缓存产品Redis做了一些研究,于是整理了一些基本的知识拿出来与大家分享,首先跟大家分享的是,如何从不同的角度来详细使用Redis. 小编将从以下9个角度来进行详细分析,希望可以帮到 ...

  6. raft--分布式一致性协议

    0. 写在前面的话 一直从事分布式对象存储工作,在分布式对象存储的运营,开发等工作中,数据一致性是至关重要的.因此想写一篇关于分布式一致性的文章.一来,可以和大家分享.二来,可以提高自己的文字提炼能力 ...

  7. 12.16daily_scrum

    这个阶段,我们组需要攻克的技术难题一个是测试及美化界面,另一个是在M1阶段的基础上进一步细化和完善悬浮窗的功能,具体的工作内容如下: 具体工作: 小组成员 今日任务 明日任务 工作时间 李睿琦 图片笔 ...

  8. HTTP 和 HTTPS 直观上看哪里不一样了

    1. 我在自己搭建的 HTTP 网站上进行登陆测试 填写账号和密码,账号:123456 ,密码:654321 (当然是乱填的,只为了看传输数据) 点击登录,用wireshark抓包看看传输的数据 2. ...

  9. python数据分析Adult-Salary预测

    具体文档戳下方网站 https://pan.wps.cn/l/s4ojed8 代码如下: import pandas as pdimport numpy as npimport matplotlib. ...

  10. 团队作业（五）——旅游行业的手机App

    首先是作业要求: 在PM 带领下, 每个团队深入分析下面行业的App, 找到行业的Top 5 (从下面的三个备选中,任选一个行业即可) 英语学习/词典App 笔记App 旅游行业的手机App 我们选择 ...