蓝狮官网html5让人大跌眼镜的炫酷特性

渴切网是P2H.cn品牌推出的新的网站健康服务的网站品牌,下面p2h为大家呈现12个html5鲜为人知的新奇特性,html5已经在中国经历了两三年的发展,在这两三年取得突飞猛进的发展,在网站建设还是网页游戏中还是引导浏览器的改革方法都获取了令人惊奇的成绩,html5的普及和html5的周边的服务,我们将指日可待了。

Google的工程师Eric Bidelman (G+, @ebidel) 做了一个演示幻灯,蓝狮注册登陆对Chrome中最新的那些很少人知道,但都非常酷也非常有用的HTML5特性进行了介绍,内容涵盖语义标签,核心JS等等,借助这些 特性,可能以前需要你花很大力气才能实现的功能,现在只需几分钟就可轻松搞定。

渴切网 Keqie.com配图
下面是内容摘要:
html5让人大跌眼镜的炫酷特性1. / Information If your browser supports this element, it should allow you to expand and collapse these details.
效果:

Information
If your browser supports this element, it should allow you to expand and collapse these details.

html5让人大跌眼镜的炫酷特性2.

动态计算结果: 0 100 + = 47

html5让人大跌眼镜的炫酷特性3.

Lorem ipsum dolor, consectetur adipiscing…
效果:

Lorem ipsum dolor, consectetur adipiscing…

html5让人大跌眼镜的炫酷特性4. 语音输入

效果:

html5让人大跌眼镜的炫酷特性5. Element操作

Element.classList,获取元素的class并进行操作
Element.dataSet, 获取所有元素的数据属性
Element.matchSelector,判断元素是否匹配某个选择器
html5让人大跌眼镜的炫酷特性6. Window.crypto,伪随机数生成

// Fill typed array with 5 8-bit unsigned random integers.
var uInt8Arr = new Uint8Array(5);
window.crypto.getRandomValues(uInt8Arr);
html5让人大跌眼镜的炫酷特性7. Window.performance,性能检测

html5让人大跌眼镜的炫酷特性8. 页面预渲染及可见性(可参看黑客志之前的文章介绍)


document.addEventListener(‘visibilitychange’, function(e) {
console.log(‘hidden:’ + document.hidden, ‘state:’ + document.visibilityState)
}, false);
html5让人大跌眼镜的炫酷特性9. navigator.online,判断是否有网络连接

html5让人大跌眼镜的炫酷特性10. window.onerror,蓝狮官网全局异常捕获

window.onerror = function(msg, url, line) {
// Track JS errors in GA.
gaq.push([‘_trackEvent’, ‘Error Log’, msg, url + ‘’ + line]);
// Log to your server.
var xhr = new XMLHttpRequest();
xhr.open(‘POST’, ‘/jserror’, true);
xhr.send(‘Line ‘ + num + ‘: (‘ + url + ‘) – ‘ + msg);
return false;
// false prevents default error handling.
};
html5让人大跌眼镜的炫酷特性11. 接受文件粘贴

document.body.onpaste = function(e) {
var items = e.clipboardData.items;
for (var i = 0; i < items.length; ++i) {
if (items[i].kind == ‘file’ && items[i].type == ‘image/png’) {
var blob = items[i].getAsFile();
var img = document.createElement(‘img’);
img.src = window.URL.createObjectURL(blob);
document.body.appendChild(img);
}
}
};
html5让人大跌眼镜的炫酷特性12. 自定义协议支持

navigator.registerProtocolHandler( ‘web+myscheme’, ‘http://example.com/handler?q=%s’, ‘My App’);
最后是对音频API的介绍,可以实现定时回放,音频分析及合成等功能,不过这个要等Chrome 14出来。

原文:http://heikezhi.com/2011/07/20/html5-whats-new/

标签:HTML5, keqie.com, p2h.cn

0 Comments
Leave a Reply