html5 demo赏析

http://html5demos.com/观赏html5 demo

 

Storageevents

可监听本地存储localStorage里面某一项的改变事件

 

dataset (data-*attributes)

<div id="test" data-name="viael.dataset" data-height="short">This element hasdata</div>

el.dataset.name = "via el.dataset"

el.dataset.height = "short"

注意属性是以data-开头的

 

History API usingpushState

使用pushState函数修改浏览器历史记录。

 

Browserbased file readingNot part of HTML5

通过FileReader 获得文件控件的路径

 

Drag files directlyinto your browserNot directly part of HTML5

原理同上,浏览器可就收外部拖拽的文件。

 

Simple chatclient

利用websocket

 

Two videosplaying in sync

Vedio标签 currentTime控制播放进度

 

Interactive canvas gradients

Canvas & Video
Video

Canvas 

Canvasvideo特性

 

ContentEditable

标签的contenteditable 属性使得标签及其子标签都可编辑

 

GeolocationWorkson Safari Mobile too

使用navigator.geolocation

 

postMessagesame domain

postMessagecross domain

 

使用postmessage跨域请求,接收页面需要代码(window.onmessage)监听消息

 

drag and drop

drag anything

新增了可监听的事件,使用dataTransfer 

offline detectionWorks on Safari Mobile too

如下代码:

addEvent(window, 'online', online);

addEvent(window, 'offline', online);

 

navigator.onLine testsDoesn't use events, only polls

使用navigator.onLine属性判断

 

on/offlineevent tests

window , body都提供online/offline事件

offlineapplication using the manifestFF 3.6 isstill buggy - doesn't request manifest after initial load

使用window.applicationCache存储。

 

Storage

Window的两个属性sessionStorage,localStorage

 

Web SQL DatabaseStorage

Web SQLDatabase - rollback test

openDatabase ,transaction,executeSql Web Workerswatch out - uses a lot of CPU!

使用Worker对象,多线程

使用postmessage传递参数(调用方和worker线程之间),使用onmessage事件监听。

 

IndexedDB

是一种轻量级NOSQL数据库

window.indexedDB = window.mozIndexedDB || window.webkitIndexedDB;

var request = indexedDB.open("MyTestDatabase"); 

http://rainsilence.iteye.com/blog/984569


Total views.

© 2013 - 2018. All rights reserved.

Powered by Hydejack v6.6.1