這篇文章整理了HTML5 的API：

1. 地理位置
2. Blob
3. 文件系統(tǒng) API
4. 客戶端數(shù)據(jù)庫（IndexedDB）
5. 設備震動
6. 亮度調(diào)節(jié)
7. 設備方向檢測
8. 全屏操作 API

1、地理位置（Geolocation API）

if('geolocation' in navigator){
  //地理位置可用
}else{
  //地理位置不可用
}

1.2 獲取當前定位

getCurrentPosition()函數(shù)可用來獲取設備當前位置：

navigator.geolocation.getCurrentPosition(success,error,option);

參數(shù)說明：

success：成功得到位置信息時的回調(diào)函數(shù)，使用Position對象作為唯一的參數(shù)
error：獲取位置信息失敗時的回調(diào)函數(shù)，使用PositionError對象作為唯一的參數(shù)，可選項
options：一個可選的PositionOptions對象，可選項

注意：使用它需要得到用戶的授權(quán)，瀏覽器會跳出一個對話框，詢問用戶是否許可當前頁面獲取他的地理位置。如果同意授權(quán)，就會調(diào)用success；如果用戶拒絕授權(quán)，則會拋出一個錯誤，調(diào)用error。

1.2.1 授權(quán)成功

function success(position){
  //成功
}

position參數(shù)是一個Position對象。其有兩個屬性：timestamp和coords。timestamp屬性是一個時間戳，返回獲得位置信息的具體時間。coords屬性指向一個對象，包含了用戶的位置信息，主要是以下幾個值：

coords.latitude：緯度  
coords.longitude：經(jīng)度  
coords.accuracy：精度  
coords.altitude：海拔  
coords.altitudeAccuracy：海拔精度（單位：米）  
coords.heading：以360度表示的方向  
coords.speed：每秒的速度（單位：米）

1.2.2 授權(quán)失敗

function error(PositionError){
  //用戶拒絕授權(quán)
}

PositionError 接口表示當定位設備位置時發(fā)生錯誤的原因。

PositionError.code 返回無符號的、簡短的錯誤碼：

1 相當于PERMISSION_DENIED	地理位置信息的獲取失敗，因為該頁面沒有獲取地理位置信息的權(quán)限。  
2 相當于POSITION_UNAVAILABLE   
地理位置獲取失敗，因為至少有一個內(nèi)部位置源返回一個內(nèi)部錯誤。   
3 相當于TIMEOUT   
獲取地理位置超時，通過定義PositionOptions.timeout 來設置獲取地理位置的超時時長。

1.2.3 options參數(shù)

用來設置定位行為

var option = {   
  enableHighAccuracy : true,   
  timeout : Infinity,   
  maximumAge : 0   
};

參數(shù)說明：

enableHighAccuracy：如果設為true，就要求客戶端提供更精確的位置信息，這會導致更長的定位時間和更大的耗電，默認設為false。   

Timeout：等待客戶端做出回應的最大毫秒數(shù)，默認值為Infinity（無限）。 

maximumAge：客戶端可以使用緩存數(shù)據(jù)的最大毫秒數(shù)。如果設為0，客戶端不讀取緩存；如果設為infinity，客戶端只讀取緩存。 

1.3 監(jiān)視定位

watchPosition()方法可以用來監(jiān)聽用戶位置的持續(xù)改變。它與 getCurrentPosition() 接受相同的參數(shù)，但回調(diào)函數(shù)會被調(diào)用多次。錯誤回調(diào)函數(shù)與 getCurrentPosition() 中一樣是可選的，也會被多次調(diào)用。

var watchID = navigator.geolocation.watchPosition(success,error, options);

一旦用戶位置發(fā)生變化，就會調(diào)用回調(diào)函數(shù)success。這個回調(diào)函數(shù)的事件對象，也包含timestamp和coords屬性。

watchPosition() 函數(shù)會返回一個 ID，唯一地標記該位置監(jiān)視器。您可以將這個 ID 傳給 clearWatch() 函數(shù)來停止監(jiān)視用戶位置。

navigator.geolocation.clearWatch(watchID);

1.4 完整例子

<div id="myLocation"></div>
<script>
    var ml=document.getElementById("myLocation");
    function getUserLocation(){
        if("geolocation" in navigator){
            var options={
                enableHighAccuracy: true, 
		maximumAge: 30000, 
		timeout: 27000
	    };	   
             navigator.geolocation.getCurrentPosition(success,error,options);
            var watchID = navigator.geolocation.watchPosition(success,error, options);
	 }else{
	    ml.innerHTML="您的瀏覽器不支持定位！";
         }
    }
    function success(position){
	var coords=position.coords;
	var lat=coords.latitude;
	var lng=coords.longitude;
	ml.innerHTML="您當前所在的位置：經(jīng)度"+lat+";緯度："+lng;
        //只有firefox支持address屬性
        if(typeof position.address !== "undefined"){  
		var country = position.address.country;  
		var province = position.address.region;  
		var city = position.address.city;  
		ml.innerHTML +="您的地址" + country + province + city;  
	}  
    }
    function error(error){
	switch(error.code){  
	    case error.TIMEOUT:  
		ml.innerHTML="連接超時，請重試";break;  
	    case error.PERMISSION_DENIED:  
		ml.innerHTML="您拒絕了使用位置共享服務，查詢已取消";break;  
	    case error.POSITION_UNAVAILABLE:  
		ml.innerHTML="親，非常抱歉，我們暫時無法為您提供位置服務";break;  
	}  
	ml.style.color="red";
    }
    window.onload=function(){
	getUserLocation();
    }
</script>

2、Blob

Blob（Binary Large Object）對象代表了一段二進制數(shù)據(jù)，提供了一系列操作接口。比如通過new Blob()創(chuàng)建的對象就是Blob對象.又比如,在XMLHttpRequest里,如果指定responseType為blob,那么得到的返回值也是一個blob對象.

2.1 生成Blob對象

生成Blob對象有兩種方法：一種是使用Blob構(gòu)造函數(shù)，另一種是對已有的Blob對象使用slice()方法切出一段。

（1）Blob構(gòu)造函數(shù)

var blob = new Blob(data, type)

Blob構(gòu)造函數(shù)接受兩個參數(shù)：

參數(shù)data是一組數(shù)據(jù)，所以必須是數(shù)組，即使只有一個字符串也必須用數(shù)組裝起來.

參數(shù)type是對這一Blob對象的配置屬性，目前也只有一個type也就是相關的MIME需要設置 type的值：    

'text/csv,charset=UTF-8' 設置為csv格式，并設置編碼為UTF-8    

'text/html'    設置成html格式

注意：任何瀏覽器支持的類型都可以這么用  

var blob = new Blob(['我是Blob'],{type: 'text/html'});

2.2 屬性

blob.size   //Blob大小（以字節(jié)為單位）
blob.type   //Blob的MIME類型，如果是未知，則是“ ”（空字符串）

2.3 slice()

slice()返回一個新的Blob對象，包含了源Blob對象中指定范圍內(nèi)的數(shù)據(jù)。

blob.slice(      
  optional long long start,      
  optional long long end,      
  optional DOMString contentType  };

參數(shù)說明：

start 可選，開始索引,可以為負數(shù),語法類似于數(shù)組的slice方法.默認值為0.  

end 可選，結(jié)束索引,可以為負數(shù),語法類似于數(shù)組的slice方法.默認值為最后一個索引.  

contentType可選 ，新的Blob對象的MIME類型,這個值將會成為新的Blob對象的type屬性的值,默認為一個空字符串.

2.4 Blob的使用

使用Blob最簡單的方法就是創(chuàng)建一個URL來指向Blob：

<a download="data.txt" id="getData">下載</a>   

var data= 'Hello world!';  
var blob = new Blob([data], {   
  type: 'text/html,charset=UTF-8'   
});
window.URL = window.URL || window.webkitURL; 
document.querySelector("#getData").href = URL.createObjectURL(blob);

上面的代碼將Blob URL賦值給a，點擊后提示下載文本文件data.txt，文件內(nèi)容為“Hello World”。

2.5 URL.createObjectURL()

objectURL = URL.createObjectURL(blob);

使用URL.createObjectURL()函數(shù)可以創(chuàng)建一個Blob URL，參數(shù)blob是用來創(chuàng)建URL的File對象或者Blob對象，返回值格式是：blob://URL。

注意：在每次調(diào)用 createObjectURL() 方法時，都會創(chuàng)建一個新的 URL 對象，即使你已經(jīng)用相同的對象作為參數(shù)創(chuàng)建過。當不再需要這些 URL 對象時，每個對象必須通過調(diào)用 URL.revokeObjectURL() 方法傳入創(chuàng)建的URL為參數(shù)，用來釋放它。瀏覽器會在文檔退出的時候自動釋放它們，但是為了獲得最佳性能和內(nèi)存使用狀況，你應該在安全的時機主動釋放掉它們。

2.6 亂碼問題

當數(shù)據(jù)中包含漢字時，導出的文件可能會出現(xiàn)亂碼，不過我們可以這樣解決：

var data = "\ufeff" + "漢字";

3、文件系統(tǒng)API

3.1 File API

在HTML5中新增了File API，可以讓網(wǎng)頁要求用戶選擇本地文件，并且讀取這些文件的信息。選擇的方式可以是HTML<input>元素，也可以是拖拽。

<input type="file" id="photo">

var selectedFile = document.getElementById('photo');
var file = selectedFile.files[0];
//或者
file = selectedFile.files.item(0)

selectedFile.files返回一個FileList對象（有一個屬性length，表示文件（File對象）個數(shù)），包含了一個或多個File對象，每個File對象都有自己的屬性：

file.name：文件名，該屬性只讀。
file.size：文件大小，單位為字節(jié)，該屬性只讀。
file.type：文件的MIME類型，如果分辨不出類型，則為空字符串，該屬性只讀。
file.lastModified：文件的上次修改時間，格式為時間戳。
file.lastModifiedDate ：文件的上次修改時間，格式為Date對象實例。

注意：如果要允許用戶選取多個文件，需要加上multiple屬性

<input type="file" multiple />

一般情況下，我們會為input注冊change事件，當文件被選擇時，觸發(fā)change。

selectFile.addEventListener('change',function(){
  var fileList = this.files;
  for(var i = 0; i < fileList.length; i++){
    var file = fileList[i];  //或者 fileList.item(0);
  }
},false);

3.1.1 拖拽文件

前面也說過，我們也可以通過拖拽方式選擇文件。

<div id="dropbox"></div>

dropbox = document.getElementById('dropbox');
dropbox.addEventListener('dragenter',dragenter,false);
dropbox.addEventListener('dragover',dragover,false);
dropbox.addEventListener('drop',drop,false);

在上面的代碼中，ID為dropbox的div就是我們拖放目的區(qū)域。

拖放事件：

function dragenter(e){
  e.stopPropagation();
  e.preventDefault();
}
function dragover(e){
  e.stopPropagation();
  e.preventDefault();
}
function drop(e){
  e.stopPropagation();
  e.preventDefault();
 
  var dt = e.dataTransfer;
  var files = dt.files;
}

在上面的代碼中，參數(shù)e是一個事件對象，該參數(shù)的dataTransfer.files屬性就是一個FileList對象，里面包含了拖放的文件。

注意：使用拖放事件時，必須阻止dragenter和dragover事件的默認行為，才能觸發(fā)drop事件。

3.1.2 FileReader API

在上面我們知道如何獲取文件信息，如何使用呢？

這時我們就要用到FileReader API了，此API用于讀取文件，，即把文件內(nèi)容讀入內(nèi)存。它的參數(shù)是File對象或Blob對象。

首先，我們需要實例化FileReader對象：

var reader = new FileReader();

對于不同類型的文件，F(xiàn)ileReader提供了不同的方法來讀取文件：

readAsBinaryString(Blob|File)：返回二進制字符串，該字符串每個字節(jié)包含一個0到255之間的整數(shù)。  
readAsText(Blob|File, opt_encoding)：返回文本字符串。默認情況下，文本編碼格式是’UTF-8’，可以通過可選的格式參數(shù)，指定其他編碼格式的文本。  
readAsDataURL(Blob|File)：返回一個基于Base64編碼的data-uri對象。  
readAsArrayBuffer(Blob|File)：返回一個ArrayBuffer對象，即固定長度的二進制緩存數(shù)據(jù)。

我們來看一個顯示用戶所選圖片的縮略圖的例子：

<input type="file" onchange="handleFiles(this.files)"/>

function handleFiles(files){
  for(var i = 0; i < files.length; i++){
    var file = files[i];
    var imageType = /^image\//;
    if(!imageType.test(file.type))  continue;
    var img = document.createElement('img');
    img.file = file;
    document.body.appendChild(img);
    
    var reader = new FileReader();
    reader.onload = function(e){
       img.src=e.target.result;
    };
    reader.readAsDataURL(file);
  }
}

在上面的代碼中，我們通過onchange去監(jiān)聽input內(nèi)文件信息的變化，通過file.type判斷用戶選擇的是否是圖片，這里使用File對象的readAsDataURL()方法來返回一個data URL，然后使用onload事件監(jiān)聽文件是否讀取完畢，如果讀取完畢，我們就可以事件對象e來讀取文件內(nèi)容，也就是e.target.result；

readAsDataURL()方法用于讀取文本文件，它的第一個參數(shù)是File或Blob對象，第二個參數(shù)是前一個參數(shù)的編碼方法，如果省略就默認為UTF-8編碼。該方法是異步方法，一般監(jiān)聽onload件，用來確定文件是否加載結(jié)束，方法是判斷FileReader實例的result屬性是否有值。其他三種讀取方法，用法與readAsDataURL方法類似。

注意：如果瀏覽器不支持FileReader，你也可以使用URL.createObjectURL(file)方法來創(chuàng)建一個data URL來顯示圖片縮略圖。

FileReader API還有一個abort方法，用于中止文件上傳。

FileReader API的其他監(jiān)聽事件

onabort方法：讀取中斷或調(diào)用reader.abort()方法時觸發(fā)。  
onerror方法：讀取出錯時觸發(fā)。  
onload方法：讀取成功后觸發(fā)。  
onloadend方法：讀取完成后觸發(fā)，不管是否成功。觸發(fā)順序排在 onload 或 onerror 后面。  
onloadstart方法：讀取將要開始時觸發(fā)。  
onprogress方法：讀取過程中周期性觸發(fā)。

4、客戶端數(shù)據(jù)庫（IndexedDB）

IndexedDB（對象數(shù)據(jù)庫）可以說是瀏覽器端數(shù)據(jù)庫，可以被網(wǎng)頁腳本程序創(chuàng)建和操作。它允許儲存大量數(shù)據(jù)，提供查找接口，還能建立索引。

在IndexedDB API中，一個數(shù)據(jù)庫就是一個命名對象倉庫（object store）的集合，對象存儲區(qū)存儲的是對象。

IndexedDB特點：

1. 鍵值對存儲：在對象倉庫中，數(shù)據(jù)以“鍵值對”的形式保存，每一個數(shù)據(jù)都有對應的鍵名，鍵名是獨一無二的，不能有重復，否則會拋出一個錯誤。
2. 同域限制：IndexedDB數(shù)據(jù)庫的作用域是限制在包含它們的文檔源中，每一個數(shù)據(jù)庫對應創(chuàng)建該數(shù)據(jù)庫的域名，兩個同源的Web頁面互相之間可以訪問對方的數(shù)據(jù)，但非同源的頁面就不行。
3. 支持事務：IndexedDB支持事務，這就是說對數(shù)據(jù)庫的查詢和更新都是包含在一個事務（transaction）中，以此來確保這些操作要么是一起成功，要么是一起失敗，并且永遠不會讓數(shù)據(jù)庫出現(xiàn)更新到一半的情況。
4. 異步：IndexedDB的操作不會阻塞瀏覽器的UI主線程。
5. 儲存空間大：IE的儲存上限是250MB，Chrome和Opera是剩余空間的某個百分比，F(xiàn)irefox則沒有上限。
   

（1）檢測瀏覽器是否支持IndexedDB API

if('indexedDB' in window){
  //支持
}else{
  //不支持
}

（2）訪問數(shù)據(jù)庫

要異步訪問數(shù)據(jù)庫，就要調(diào)用 window 對象 indexedDB 屬性的 open() 方法

var request = indexedDB.open(name[,version])

indexedDB.open方法可傳輸人兩個參數(shù)：name是數(shù)據(jù)庫名稱，必填；version是數(shù)據(jù)庫版本，是一個大于0的正整數(shù)（0將報錯）。

open方法返回一個 IDBRequest 對象 (IDBOpenDBRequest)，

注意：如果數(shù)據(jù)庫存在，將打開數(shù)據(jù)庫，否則，則會新建該數(shù)據(jù)庫。如果省略第二個參數(shù)，則會自動創(chuàng)建版本為1的該數(shù)據(jù)庫。

當打開數(shù)據(jù)時，有可能觸發(fā)4種事件：

success：打開成功。  
error：打開失敗。  
upgradeneeded：第一次打開該數(shù)據(jù)庫，或者數(shù)據(jù)庫版本發(fā)生變化。  
blocked：上一次的數(shù)據(jù)庫連接還未關閉。

第一次打開數(shù)據(jù)庫時，會先觸發(fā)upgradeneeded事件，然后觸發(fā)success事件。

request.onupgradeneeded = function(e){}

request.onsuccess = function(e){
  db = e.target.result;
}

回調(diào)函數(shù)接受一個事件對象event作為參數(shù)，它的target.result屬性就指向打開的IndexedDB數(shù)據(jù)庫。

（3）IndexedDB實例對象的方法

3.1 createObjectStore()方法

createObjectStore()方法用于創(chuàng)建存放數(shù)據(jù)的“對象倉庫”（object store）。

db.createObjectStore(name[,options]);

參數(shù)說明：

參數(shù)name是對象倉庫的名字；options是可選參數(shù)，用來設置對象倉庫的屬性，可配置兩個屬性：keyPath和autoIncrement，分別表示每條記錄的鍵名和是否使用自動遞增的整數(shù)作為鍵名，默認為false。

db.createObjectStore('db1', {keyPath: 'user'});
db.createObjectStore('db2', {autoIncrement: true});

由于對象倉庫的名字具有唯一性（當創(chuàng)建已存在的數(shù)據(jù)庫時，會報錯），所以在創(chuàng)建對象倉庫時，我們有必要檢測對象倉庫是否已存在：

db.objectStoreNames.contains(name)

objectStoreNames屬性返回一個DOMStringList對象，里面包含了當前數(shù)據(jù)庫所有“對象倉庫”的名稱?？梢允褂肈OMStringList對象的contains方法，檢查數(shù)據(jù)庫是否包含某個“對象倉庫”。

3.2 transaction方法

創(chuàng)建了數(shù)據(jù)庫，當然要使用它，不過數(shù)據(jù)庫的更新、讀取和刪除是建立在事務的基礎上的，所以我們首先要創(chuàng)建一個事務：

var t = db.transaction(array,type)

transcation()方法接受兩個參數(shù)：參數(shù)array是一個數(shù)組，包含了所要使用的對象倉庫，通常是一個；參數(shù)type是一個表示操作類型的字符串，目前只有兩種類型：readonly（只讀）和readwrite（讀寫）。

t = db.transaction(['db1','readwrite');

transaction()方法返回一個事務對象，該對象的objectStore()方法用于獲取指定的對象倉庫：

var store = t.objectStore('db1');

事務對象有三個監(jiān)聽事件：

abort：事務中斷。  
complete：事務完成。  
error：事務出錯。

假如事務完成時：

t.oncomplete =function(e){}

3.2.1 數(shù)據(jù)操作

下面的方法都是在事件對象上。

（1）add()方法

add()方法用來添加數(shù)據(jù)

var add = store.add(data,key)

參數(shù)說明：參數(shù)data是所要添加的數(shù)據(jù)；參數(shù)key是這條數(shù)據(jù)對應的鍵名（key）。

add()方法是異步的，有success和error事件：

add.onsuccess = funciton(e){}
add.onerror = function(e){}

（2）get()方法

get()方法用來讀取數(shù)據(jù)，它的參數(shù)是鍵名

store.get(key)

get方法也是異步的，也有success和error事件。

（3）put()方法

put()方法用來更新數(shù)據(jù)，與add()方法類似：

var update = store.put(data,key)

（4）delete()方法

delete()方法用來刪除數(shù)據(jù)，它的參數(shù)是鍵名：

var delete = store.delete(key)

delete方法也是異步的，也有success和error事件。

（5）openCursor()方法

openCursor()方法用來遍歷數(shù)據(jù)：

var cursor = store.openCursor()

openCursor方法也是異步的，也有success和error事件。

cursor.onsuccess = function(e){
  var res = e.target.result;
  console.log('key',res.key);
  console.log('data',res.value);
  res.continue()
}

e.target.result屬性指向當前數(shù)據(jù)對象。當前數(shù)據(jù)對象的key和value分別返回鍵名和鍵值（即實際存入的數(shù)據(jù)）。continue方法將光標移到下一個數(shù)據(jù)對象，如果當前數(shù)據(jù)對象已經(jīng)是最后一個數(shù)據(jù)了，則光標指向null。

openCursor方法還可以接受第二個參數(shù)，表示遍歷方向，默認值為next，其他可能的值為prev、nextunique和prevunique。后兩個值表示如果遇到重復值，會自動跳過。

3.3 createIndex()方法

createIndex()方法用來創(chuàng)建索引：

createIndex(index,name,options)

createIndex方法接受三個參數(shù)，第一個是索引名稱，第二個是建立索引的屬性名，第三個是參數(shù)對象，用來設置索引特性。unique表示索引所在的屬性是否有唯一值.

3.3.1 index方法

index()方法用于從對象倉庫返回指定的索引。

var index = store.index(index);
var data = index.get(name)

注意：get方法有可能取回多個數(shù)據(jù)對象，因為name屬性沒有唯一值。

5、設備震動（Vibration API）

Vibration接口用于在瀏覽器中發(fā)出命令，使得設備振動。

（1）檢測是否可用

目前，只有Chrome和Firefox的Android平臺最新版本支持它。

navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;   

if (navigator.vibrate) {   
  // 支持  
}

（2）振動

navigator.vibrate(1000);

vibrate()方法的參數(shù)就是振動持續(xù)的毫秒數(shù)，除了單個數(shù)值外，還可以接受一個數(shù)組作為參數(shù)，表示振動的模式。偶數(shù)位置的數(shù)組成員表示振動的毫秒數(shù)，奇數(shù)位置的數(shù)組成員表示等待的毫秒數(shù)。

navigator.vibrate([200,100,300])

上面代碼表示，設備先振動200毫秒，然后等待100毫秒，再接著振動300毫秒。

注意：vibrate是一個非阻塞式的操作，即手機振動的同時，JavaScript代碼仍然繼續(xù)向下運行。要停止振動，只有將0毫秒或者一個空數(shù)組傳入vibrate方法。

6、屏幕亮度（Luminosity API）

Luminosity API用來屏幕亮度調(diào)節(jié)，不過目前只有Firefox支持。

當移動設備的亮度傳感器感知外部亮度發(fā)生顯著變化時，會觸發(fā)devicelight事件。

window.addEventListener('devicelight', function(event) {   
  console.log(event.value + 'lux');  
});

上面代碼表示，devicelight事件的回調(diào)函數(shù)，接受一個事件對象作為參數(shù)。該對象的value屬性就是亮度的流明值。

7、手機設備方向

7.1 方向

Orientation API用于檢測手機的擺放方向（豎放或橫放）。

（1）檢測瀏覽器是否支持

if(window.DeviceOrientationEvent){
  //支持
}else{
  //不支持
}

（2）監(jiān)聽方向變化

一旦設備的方向發(fā)生變化，會觸發(fā)deviceorientation事件，可以對該事件指定回調(diào)函數(shù)。

window.addEventListener("deviceorientation", listener,false);

function listener(event){
  var alpha = event.alpha;
  var beta = event.beta;
  var gamma = event.gamma;
}

上面代碼中，event事件對象有alpha、beta和gamma三個屬性，它們分別對應手機擺放的三維傾角變化。要理解它們，就要理解手機的方向模型。當手機水平擺放時，使用三個軸標示它的空間位置：x軸代表橫軸、y軸代表豎軸、z軸代表垂直軸。event對象的三個屬性就對應這三根軸的旋轉(zhuǎn)角度。

alpha：表示圍繞z軸的旋轉(zhuǎn)，0~360(度)。當設備水平擺放時，頂部指向地球的北極，alpha此時為0。  
beta：表示圍繞x軸的旋轉(zhuǎn)，-180~180(度)，由前向后。當設備水平擺放時，beta此時為0。  
gramma：表示圍繞y軸的選擇，-90~90(度)，從左到右。當設備水平擺放時，gramma此時為0。

7.2 移動（motion）

（1）檢測是否支持

if(window.DeviceMotionEvent){
  //支持
}else{
  //不支持
}

（2）和方向事件一樣，移動也有監(jiān)聽事件：devicemotion

window.addEventListener('devicemotion',listener,true)

function listener(event){
  var acceleration = event.acceleration;
  var accelerationIncludingGravity = event.accelerationIncludingGravity;
  var rotationRate = event.rotationRate;
  var interval = event.interval;
}

上面代碼中，event事件對象有acceleration、accelerationIncludingGravity、rotationRate和interval四個屬性。

屬性說明：

（1）acceleration、accelerationIncludingGravity

acceleration和accelerationIncludingGravity屬性都包含三個軸：

• x軸：西向東（acceleration.x）
• y軸：南向北（acceleration.y）
• z軸：垂直地面（acceleration.z）

（2）rotationRate

rotationRate有三個值： 

alpha: 設備沿著垂直屏幕的軸的旋轉(zhuǎn)速率 (桌面設備相對于鍵盤) 

beta: 設備沿著屏幕左至右方向的軸的旋轉(zhuǎn)速率(桌面設備相對于鍵盤) 

gamma: 設備沿著屏幕下至上方向的軸的旋轉(zhuǎn)速率(桌面設備相對于鍵盤) 

（3）interval

interval 表示的是從設備獲取數(shù)據(jù)的頻率，單位是毫秒。

更多：檢測設備方向

簡單的搖一搖功能：

var SHAKE_THRESHOLD = 3000;   
var last_update = 0;   
var x = y = z = last_x = last_y = last_z = 0;

if (window.DeviceMotionEvent) {   
  window.addEventListener('devicemotion', deviceMotionHandler, false);   
}
 
function deviceMotionHandler(eventData) {   
  var acceleration = eventData.accelerationIncludingGravity;   
  var curTime = new Date().getTime();   
  var diffTime = curTime - last_update;   
  if (diffTime > 100) {   
    last_update = curTime;   
    x = acceleration.x;   
    y = acceleration.y;   
    z = acceleration.z;   
    var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;   
   if (speed > SHAKE_THRESHOLD) {
     //dosomething
   };    
   last_x = x;   
   last_y = y;   
   last_z = z;   
 }   
}

8、全屏操作（FullScreen API）

全屏API可以控制瀏覽器全屏顯示。

8.1 requestFullscreen()

Element節(jié)點的requestFullscreen方法，可以使得這個節(jié)點全屏。

function openFullscreen(elem){
  if (elem.requestFullscreen) {   
    elem.requestFullscreen();  
  } else if (elem.mozRequestFullScreen) {   
    elem.mozRequestFullScreen();  
  } else if (elem.webkitRequestFullscreen) {   
    elem.webkitRequestFullscreen();  
  }
}

openFullscreen(document.documentElement);   //整個頁面全屏
openFullscreen(document.getElementById('videoElement');  //使播放器全屏

運行到這里，Gecko 與 WebKit 兩個實現(xiàn)中出現(xiàn)了一個值得注意的區(qū)別：

Gecko 會為元素自動添加 CSS 使其伸展以便鋪滿屏幕： "width: 100%; height: 100%"。 WebKit 則不會這么做；它會讓全屏的元素以原始尺寸居中到屏幕中央，其余部分變?yōu)楹谏?/p>

所以為了在 WebKit 下也達到與 Gecko 同樣的全屏效果，你需要手動為元素增加 CSS 規(guī)則"width: 100%; height: 100%;"：

/* html */    
:-webkit-full-screen {}    

:-moz-fullscreen {}        

:fullscreen {}       

:-webkit-full-screen video {     
  width: 100%;     
  height: 100%;    
}  

8.2 exitFullscreen()

Document對象的exitFullscreen方法用于取消全屏。

function closeFullscreen(){
  if (document.exitFullscreen) {   
    document.exitFullscreen();  
  } else if (document.mozCancelFullScreen) {   
    document.mozCancelFullScreen();  
  } else if (document.webkitCancelFullScreen) {   
    document.webkitCancelFullScreen();  
  } else if (document.msExitFullscreen) {   
    document.msExitFullscreen();  
  }
}
closeFullscreen()

用戶手動按下ESC鍵或F11鍵，也可以退出全屏鍵。此外，加載新的頁面，或者切換tab，或者從瀏覽器轉(zhuǎn)向其他應用（按下Alt-Tab），也會導致退出全屏狀態(tài)。

8.3 全屏屬性和事件

8.3.1 屬性

document.fullscreenElement: 當前處于全屏狀態(tài)的元素 element. document.fullscreenEnabled: 標記 fullscreen 當前是否可用.

var fullscreenElement = document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement;    

var fullscreenEnabled = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled;

8.3.2 全屏事件

fullscreenchange事件：瀏覽器進入或離開全屏時觸發(fā)。   

fullscreenerror事件：瀏覽器無法進入全屏時觸發(fā)，可能是技術(shù)原因，也可能是用戶拒絕。

document.addEventListener('fullscreenchange',function(){
  if(document.fullscreenElement){
    //進入全屏
  }else{
    //退出全屏
  }
},false);