内容简介：本篇的html5新特性是下篇，将把html5上篇没有介绍到的新特性分享出来，OK，下面是正文：拖放是html5提供一个新的特性，这个特性增加了拖拽事件的api,和定义可以拖拽的属性。举个例子，在h5之前实现拖拽功能，其实用的是一种模拟方式，鼠标`
本篇的html5新特性是下篇，将把html5上篇没有介绍到的新特性分享出来，OK，下面是正文：
1. 拖放（Drag 和 drop）
拖放是html5提供一个新的特性，这个特性增加了拖拽事件的api,和定义可以拖拽的属性。举个例子，在h5之前实现拖拽功能，其实用的是一种模拟方式，鼠标 onmousedown
时，获取当前的一些信息，然后在 onmousemove
时不断更新推拽对象的 left
和 top
值，最后在 onmouseup
时对推拽对象彻底赋值，并进行释放后一系列的程序操作。现在h5出来后呢，不在需要模拟了，因为它已经有标准的事件api了，下面看例子：
`
<style type="text/css">
.draggable{width: 120px; height: 120px;text-align: center; line-height: 120px; background-color: #8FBC8F; color: white; border: 5px solid yellowgreen; position: absolute; top: 0;left: 0;}
</style>
<div id="draggable" class="draggable" draggable="true">
draggable
</div>
var dragEl = document.getElementById('draggable');
var l = null, t = null;
dragEl.ondragstart = function (e) { // 准备推拽时
l = e.clientX - this.offsetLeft, t = e.clientY - this.offsetTop;
}
dragEl.ondrag = function (e) { // 拖拽进行时
var x = e.clientX, y = e.clientY;
this.style.left = x - l + 'px';
this.style.top = y - t + 'px';
console.log(x, y, l , t)
}
dragEl.ondragend = function (e) { // 拖拽结束时
var x = e.clientX, y = e.clientY;
this.style.left = x - l + 'px';
this.style.top = y - t + 'px';
}
复制代码
`
注意：拖拽对象必须把 draggable
属性设置为 true
，其他开发思维其实和以前一样的，没有多大差别，只是多了更多的监听事件而已 ，想要详细了解拖拽的同学可以去拖放API查看。
2. 地理定位
地理定位这个特性，故名思意，就是获取用户位置信息的。通过 getCurrentPosition()
获取一系列定位信息， getCurrentPosition()
有两个回调函数参数，获取地理位置成功的回调和失败的回调。
`
navigator.geolocation.getCurrentPosition(successPos)
function successPos (pos){
console.log('用户定位数据获取成功')
//console.log(arguments);
console.log('定位时间：',pos.timestamp)
console.log('经度：',pos.coords.longitude)
console.log('纬度：',pos.coords.latitude)
console.log('海拔：',pos.coords.altitude)
console.log('速度：',pos.coords.speed)
复制代码
}` 想了解关于更多的地理位置特性的信息可以移步到HTML5 地理定位去查看哦。
3. 离线存储
HTML5，通过创建 cache manifest 文件，可以创建 web 应用的离线版本。如果要启用应用程序缓存，必须在文档的 <html>
标签中包含 manifest
属性：每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。
manifest 文件的建议的文件扩展名是：".appcache". 请注意，manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置
manifest 文件可分为三个部分：
- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
- NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
下面是个完整的manifest文件： `
CACHE MANIFEST 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html5/ /404.html 复制代码
` 离线存储这个功能，通俗的讲，其实就是把web的资源文件存储起来，个人觉得移动端的应用效果会更好一些，毕竟流量贵呀，把一些文件存储起来，这样可以大大的节省流量和服务器的压力，当然同样更多的知识点伙伴们去官网查看吧HTML 5 应用程序缓存。
4. Web 存储
如果说离线存储是对web的资源文件存储，那么web 存储就是对应用程序里的数据做存储了。web存储提供了两个存储方式:
localStorage sessionStorage
在之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。
`
localStorage.setItem('key', 'val') // 存储数据
localStorage.getItem('key') // 取数据
localStorage.removeItem('key') // 删除数据
localStorage.clear() // 删除所有数据
localStorage.key(index) // 获取某个索引数据的
sessionStorage.setItem('key', 'val') // 存储数据
sessionStorage.getItem('key') // 取数据
sessionStorage.removeItem('key') // 删除数据 `
注意： localStorage
和 sessionStorage
存储的数据都是字符串类型的数据，取出来的数据也是字符串类型，因此如果存储的对象不是字符串，则要转换成字符串数据类型
5. WebSocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
WebSocket 属性
Socket.readyState Socket.bufferedAmount
WebSocket 事件
Socket.onopen Socket.onmessage Socket.onerror Socket.onclose
例子：`
function WebSocketTest()
{
if ("WebSocket" in window)
{
alert("您的浏览器支持 WebSocket!");
// 打开一个 web socket
var ws = new WebSocket("ws://localhost:9998/echo");
ws.onopen = function()
{
// Web Socket 已连接上，使用 send() 方法发送数据
ws.send("发送数据");
alert("数据发送中...");
};
ws.onmessage = function (evt)
{
var received_msg = evt.data;
alert("数据已接收...");
};
ws.onclose = function()
{
// 关闭 websocket
alert("连接已关闭...");
};
}
else
{
// 浏览器不支持 WebSocket
alert("您的浏览器不支持 WebSocket!");
}
}
WebSocketTest()
复制代码
` 关于更多的WebSocket大家就去HTML5 WebSocket了解吧。
6. Web Workers
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。 关于web worker的应用大概分为三个部分：
onmessage w.terminate()
下面是个简单的 web worker文件 `
// 这是一个单独的js文件
var i=0;
function timedCount()
{
i=i+1;
postMessage(i); //把数据发送出去
setTimeout("timedCount()",500);
}
timedCount();
复制代码
` 在html页面调用worker文件，并创建worker对象
`
<div>计数器: <output id="result"></output></div>
<button onclick="startWorker()">开始Worker</button>
<button onclick="stopWorker()">停止Worker</button>
var w;
function startWorker()
{
if(typeof(Worker)!=="undefined")
{
if(typeof(w)=="undefined")
{
w=new Worker("worker.js"); // 创建worker实例对象
}
w.onmessage = function (event) { // 通过onmessage事件接收数据
document.getElementById("result").innerHTML=event.data;
};
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser
does not support Web Workers...";
}
}
function stopWorker()
{
w.terminate(); // 停止worker任务
}
复制代码
` 注意：由于Worker属于外部文件，因此它不能获取javascript这些对象： window 对象，document 对象，parent 对象。
总结
HTML5新特性概述本次用上下俩篇进行了总结和简单的概述，目的就是给大家一个关于html5总体的认识。本次分享就到这里了，喜欢的朋友帮给个赞吧，谢谢。
以上所述就是小编给大家介绍的《HTML5新特性概述(下)》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
在你身边，为你设计
腾讯公司用户研究与体验设计部 / 电子工业出版社 / 2013-1 / 69.00元
设计属于所有人，也意在为所有人使用，这既是设计的价值，也是设计的责任。本书内容包括：设计理念、设计方法、用户研究、体验设计、设计流程和工具，以及团队成长与管理等方面的知识与经验分享。一起来看看 《在你身边，为你设计》 这本书的介绍吧!
