h5基础知识二

来源：互联网发布：linux下使用ant 编辑：程序博客网时间：2024/04/29 11:50

一、多媒体播放器

引入视频 Video： <video src="" ></video>

方法：a. play() 播放 b.pause() 暂停

属性：a.播放当前时间（当前时间）currentTime

b.视频总时长（获取持续时间） duration

c. 播放的状态 paused

事件：a.视频播放的过程会一直触发这个函数，播放过程中，各动态变化 timeupdate

b.当视频可以播放的时候执行，一般是在函数里面写总时间 canplay

二、全屏

方法：a. webkit: -webkitRequestFullscreen() //谷歌浏览器

b. moz: mozRequestFullScreen() //火狐浏览器

c. ms: msRequestFullscreen()

d. requestFullscreen()

关闭全屏显示 cancleFullScreen()

通过document.fullScreen检测当前是否处于全屏

三、拖放

在HTML5的规范中，我们可以通过为元素增加draggable="true"来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启的。

1、拖拽元素

一个属性：页面中设置了draggable="true"属性的元素。设置元素是否可以拖拽。

2、目标元素

页面中任何一个元素都可以成为目标元素

3、事件监听

拖拽元素

ondrag 应用于拖拽元素，整个拖拽过程都会调用

ondragstart 应用于拖拽元素，当拖拽开始时调用

ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用

ondragend 应用于拖拽元素，当拖拽结束时调用

目标元素

ondragenter 应用于目标元素，当拖拽元素进入时调用
ondragover 应用于目标元素，当停留在目标元素上时调用
ondragleave 应用于目标元素，当鼠标离开目标元素或拖拽结束时时调用

四、web存储（就是可以通过js 向用户本地保存数据）

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。

①Storage 存储 ②window.sessionStorage（会话存储）③window.localStorage（本地存储）

特性：①设置、读取方便②容量较大，sessionStorage约5M、localStorage约20M

③只能往本地存储一些比较简单的字符串数据。以将对象JSON.stringify() 编码后存储。以键值对的方式存储。

两个对象提供了四个方法让我们来进行操作：

a.设置数据 setItem(key,value)

b.通过键读取值 getItem(key); //返回值，使用var 接收，然后打印

c.通过键移除值 removeItem(key); //根据指定的key 移除数据

d.清除数据 clear(); //清空数据，把所有的键值对都移除

两个对象有什么区别：

①两个对象都有这样的方法。

②sessionStorage 里面的数据是保存在内存里面。生命周期为关闭浏览器窗口，在同一个窗口下数据可以共享。

解释：往sessionStorage 里面保存了数据，关闭浏览器，然后再重新打开这个浏览器，在获取这些数据，没有数据了。说明：说明数据存在浏览器的内存里面，关闭浏览器，内存里面的数据清空了
③localStorage 保存在硬盘上面。永久生效，除非手动删除；可以多窗口共享。

解释：往localStorage 里面保存了数据，关闭浏览器，再次访问这个页面，再次打开浏览器，还是可以获取到localStorage 这个对象里面的数据。说明数据保存在我的本地硬盘上面。

五、地理定位

在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务 (LocationBaseService)。

1、获取信息的方式。浏览器会自动以最优方式去获取用户地理信息。

2、隐私

HTML5Geolocation(地理位置定位) 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息。

3、API详解

//接收一个回调函数
//获取定位成功之后就会调用showPostion

window.navagator.geolocation.getCurrentPosition(showposition)
//position 可以获取经纬度。 //浏览器传递一个参数，把经纬度通过这个position 传给我们。
function showposition(position){

position.coords.latitude;
position.coords.longitude;

}
//实际应用我们是获取到经纬度，然后调用百度地图。

navigator.getCurrentPosition(successCallback,errorCallback, options) 获取当前地理信息

navigator.watchPosition(successCallback,errorCallback, options)重复获取当前地理信息

①当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position。Coords(坐标)

position.coords.latitude纬度 position.coords.longitude经度

②当获取地理信息失败后，会调用errorCallback，并返回错误信息error

③可选参数 options 对象可以调整位置信息数据收集方式

六、网络状态

我们可以通过window.onLine来检测，用户当前的网络状况，返回一个布尔值。

①window.online用户网络连接时被调用②window.offline用户网络断开时被调用

            //当有网络的时候会触发该事件。         window.addEventListener("online",function(){                alert("已经建立了网络连接")；        })        //当离线的时候触发该事件        window.addEventListener("offline",function(){               alert("世界上最遥远的距离就是没有网!!!")；        })

七、离线存储

HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个cache manifest文件。

缓存文件，缓存图片，缓存页面，缓存css，缓存js

1、优势

a.可配置需要缓存的资源

b.网络无连接应用仍可用

c.本地读取缓存资源，提升访问速度，增强用户体验

d.减少请求，缓解服务器负担

2、缓存清单

一个普通文本文件，其中列出了浏览器应缓存以供离线访问的资源，推荐使用.appcache为后缀名，添加 MIME类型。

AddType text/cache-manifest .appcache

例如：我们创建了一个名为demo.appcache的文件，然后在需要应用缓存在页面的根元素(html)添加属性 manifest="demo.appcache"，路径要保证正确。

3、manifest文件格式

a. 顶行写CACHE MANIFEST

b. CACHE: 换行指定我们需要缓存的静态资源，如.css、image、js等

c. NETWORK: 换行指定需要在线访问的资源，可使用通配符

d.FALLBACK:(回退; 后退)

换行当被缓存的文件找不到时的备用资源

使用缓存两步：
1：定义一个缓存文件 demo.appcache
①CACHE MAINFEST
②CACHE: //缓存文件的路径
③NETWORK:需要有网才能访问的文件。
2：在页面使用缓存文件
<html manifest="demo.appcache">
</html>

4、其他

a. CACHE: 可以省略，这种情况下将需要缓存的资源写在CACHE MANIFEST

b. 可以指定多个CACHE: NETWORK: FALLBACK:，无顺序限制

CACHE:需要缓存那些资源.

NETWORK:不需要缓存那些资源，必须在网络下面才能访问.

FALLBACK:当访问不到某个资源时，自动由另外一个资源替换. 例如：

       one.css two.css 会缓存two.css 当找不到one.css 会去找two.css 文件.

c. #表示注释，只有当demo.appcache文件内容发生改变时或者手动清除缓存后，才会重新缓存。

d. chrome 可以通过chrome://appcahe-internals/工具和离线

八、历史

提供window.history，对象我们可以管理历史记录，可用于单页面应用，SinglePage Application，可以无刷新改变网页内容。

旧版本浏览器. history.back() 回退 history.forward()前进

0 0