内容简介：本篇的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新特性概述(下)》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Remote
Jason Fried、David Heinemeier Hansson / Crown Business / 2013-10-29 / CAD 26.95
The “work from home” phenomenon is thoroughly explored in this illuminating new book from bestselling 37signals founders Fried and Hansson, who point to the surging trend of employees working from hom......一起来看看 《Remote》 这本书的介绍吧!
