HTML5——拖拽，地理定位，web存储，缓存

来源：互联网发布：验证码java 编辑：程序博客网时间：2024/06/08 06:27

新增API

多媒体

方法：load() 加载、play() 播放、pause() 暂停
属性：currentTime 视频播放的当前进度、
duration:视频的总时间
paused:视频播放的状态.

事件：
oncanplay: 事件在用户可以开始播放视频/音频（audio/video）时触发。

video.oncanplay = function(){    video.style.display ='block';    h = Math.floor(video.duration/3600);    m = Math.floor(video.duration/60);    s = Math.floor(video.duration%60);    h = h<10?'0'+h:h;    m =m<10?'0'+m:m;    s = s<10?'0'+s:s;}

ontimeupdate:通过该事件来报告当前的播放进度.
onended:播放完时触发

全屏：

video.webkitRequestFullScreen();

拖拽

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

事件监听
拖拽元素(页面中设置了draggable=”true”属性的元素)

ondragstart 应用于拖拽元素，当拖拽开始时调用
ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用
ondragend 应用于拖拽元素，当拖拽结束时调用

目标元素(页面中任何一个元素都可以成为目标元素)
ondragenter 应用于目标元素，当拖拽元素进入时调用

ondragover 应用于目标元素，当停留在目标元素上时连续触发，如果需要设置允许放置，调用event.preventDefault（）;

ondrop当在目标元素上松开鼠标时触发

地理定位

在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务 (Location Base Service)
获取地理信息方式
1、IP地址
2、三维坐标
GPS（Global Positioning System，全球定位系统）

3、用户自定义数据
如下图对不同获取方式的优缺点进行了比较，浏览器会自动以最优方式去获取用户地理信息。
这里写图片描述

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

API详解

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

1.当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position。Coords(坐标)
position.coords.latitude纬度
position.coords.longitude经度
2、当获取地理信息失败后，会调用errorCallback，并返回错误信息error
3、可选参数 options 对象可以调整位置信息数据收集方式

Web存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。
Storage 存储
向本地保存数据,有可能在浏览器内存里面，有可能在硬盘上面
特性
1、设置、读取方便
2、容量较大，sessionStorage约5M、localStorage约20M
3、只能存储字符串，可以将对象JSON.stringify() 编码后存储

window.sessionStorage
1、生命周期为关闭浏览器窗口
2、在同一个窗口下数据可以共享

window.localStorage
1、永久生效，除非手动删除
2、可以多窗口共享
方法详解
setItem(key, value) 设置存储内容
getItem(key) 读取存储内容
removeItem(key) 删除键值为key的存储内容
clear() 清空所有存储内容
key(n) 以索引值来获取存储内容

全屏

HTML5规范允许用户自定义网页上任一元素全屏显示。

 requestFullscreen(); 开启全屏显示 cancleFullscreen(); 关闭全屏显示

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

网络状态

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

 window.online用户网络连接时被调用 window.offline用户网络断开时被调用window.addEventListener("online",function(){         alert("已经建立了网络连接")    })   window.addEventListener("offline",function(){         alert("已经失去了网络连接")   })

应用缓存

HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个cache manifest文件。
优势
1、离线浏览 - 用户可在应用离线时使用它们
2、本地读取缓存资源，提升访问速度，增强用户体验
3、减少请求，缓解服务器负担

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

<html manifest="demo.appcache">

manifest文件格式
manifest 文件的建议的文件扩展名是：”.appcache“。
请注意，manifest 文件需要配置正确的 MIME-type，即 “text/cache-manifest”。必须在 web 服务器上进行配置。
1、CACHE MANIFEST
指定我们需要缓存的静态资源，如.css、image、js等
2、NETWORK 不需要缓存那些资源，必须在网络下面才能访问.
3、FALLBACK: 当前页面无法访问时退回的页面

CACHE MANIFEST# 2012-02-21 v1.0.0/theme.css/logo.gif/main.jsNETWORK:login.aspFALLBACK:/html5/ /404.html

#表示注释，只有当demo.appcache文件内容发生改变时或者手动清除缓存后，才会重新缓存。如果您编辑了一幅图片，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

Font Awesome 字体框架

http://fontawesome.dashgame.com/
Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果

阅读全文

0 0