JavaScript學(xué)習(xí)筆記整理（17）：HTML5 API

2018-06-19 13:59 更新

這篇文章整理了HTML5 的API：

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

1、地理位置（Geolocation API）

Geolocation接口用于獲取用戶(hù)的地理位置。它使用的方法基于GPS或者其他機(jī)制（比如IP地址、Wifi熱點(diǎn)、手機(jī)基站等）。

1.1 檢測(cè)地理位置是否可用
if('geolocation' in navigator){
  //地理位置可用
}else{
  //地理位置不可用
}

1.2 獲取當(dāng)前定位

getCurrentPosition()函數(shù)可用來(lái)獲取設(shè)備當(dāng)前位置：

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

參數(shù)說(shuō)明：

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

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

1.2.1 授權(quán)成功

function success(position){
  //成功
}

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

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){
  //用戶(hù)拒絕授權(quán)
}

PositionError 接口表示當(dāng)定位設(shè)備位置時(shí)發(fā)生錯(cuò)誤的原因。

PositionError.code 返回?zé)o符號(hào)的、簡(jiǎn)短的錯(cuò)誤碼：

1 相當(dāng)于PERMISSION_DENIED	地理位置信息的獲取失敗，因?yàn)樵擁?yè)面沒(méi)有獲取地理位置信息的權(quán)限。  
2 相當(dāng)于POSITION_UNAVAILABLE   
地理位置獲取失敗，因?yàn)橹辽儆幸粋€(gè)內(nèi)部位置源返回一個(gè)內(nèi)部錯(cuò)誤。   
3 相當(dāng)于TIMEOUT   
獲取地理位置超時(shí)，通過(guò)定義PositionOptions.timeout 來(lái)設(shè)置獲取地理位置的超時(shí)時(shí)長(zhǎng)。

1.2.3 options參數(shù)

用來(lái)設(shè)置定位行為

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

參數(shù)說(shuō)明：

enableHighAccuracy：如果設(shè)為true，就要求客戶(hù)端提供更精確的位置信息，這會(huì)導(dǎo)致更長(zhǎng)的定位時(shí)間和更大的耗電，默認(rèn)設(shè)為false。   

Timeout：等待客戶(hù)端做出回應(yīng)的最大毫秒數(shù)，默認(rèn)值為Infinity（無(wú)限）。 

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

1.3 監(jiān)視定位

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

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

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

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

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="您當(dāng)前所在的位置：經(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="連接超時(shí)，請(qǐng)重試";break;  
	    case error.PERMISSION_DENIED:  
		ml.innerHTML="您拒絕了使用位置共享服務(wù)，查詢(xún)已取消";break;  
	    case error.POSITION_UNAVAILABLE:  
		ml.innerHTML="親，非常抱歉，我們暫時(shí)無(wú)法為您提供位置服務(wù)";break;  
	}  
	ml.style.color="red";
    }
    window.onload=function(){
	getUserLocation();
    }
</script>


2、Blob

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


2.1 生成Blob對(duì)象

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

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

var blob = new Blob(data, type)

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

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

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

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

'text/html'    設(shè)置成html格式

注意：任何瀏覽器支持的類(lèi)型都可以這么用  

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


2.2 屬性

blob.size   //Blob大?。ㄒ宰止?jié)為單位）
blob.type   //Blob的MIME類(lèi)型，如果是未知，則是“ ”（空字符串）


2.3 slice()

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

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

參數(shù)說(shuō)明：

start 可選，開(kāi)始索引,可以為負(fù)數(shù),語(yǔ)法類(lèi)似于數(shù)組的slice方法.默認(rèn)值為0.  

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

contentType可選 ，新的Blob對(duì)象的MIME類(lèi)型,這個(gè)值將會(huì)成為新的Blob對(duì)象的type屬性的值,默認(rèn)為一個(gè)空字符串.


2.4 Blob的使用

使用Blob最簡(jiǎn)單的方法就是創(chuàng)建一個(gè)URL來(lái)指向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，點(diǎn)擊后提示下載文本文件data.txt，文件內(nèi)容為“Hello World”。


2.5 URL.createObjectURL()

objectURL = URL.createObjectURL(blob);

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

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


2.6 亂碼問(wèn)題

當(dāng)數(shù)據(jù)中包含漢字時(shí)，導(dǎo)出的文件可能會(huì)出現(xiàn)亂碼，不過(guò)我們可以這樣解決：

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


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


3.1 File API

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

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

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

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

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

注意：如果要允許用戶(hù)選取多個(gè)文件，需要加上multiple屬性

<input type="file" multiple />

一般情況下，我們會(huì)為input注冊(cè)change事件，當(dāng)文件被選擇時(shí)，觸發(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 拖拽文件

前面也說(shuō)過(guò)，我們也可以通過(guò)拖拽方式選擇文件。

<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是一個(gè)事件對(duì)象，該參數(shù)的dataTransfer.files屬性就是一個(gè)FileList對(duì)象，里面包含了拖放的文件。

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


3.1.2 FileReader API

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

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

首先，我們需要實(shí)例化FileReader對(duì)象：

var reader = new FileReader();

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

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

我們來(lái)看一個(gè)顯示用戶(hù)所選圖片的縮略圖的例子：

<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);
  }
}

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


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


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


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


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

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


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

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


在IndexedDB API中，一個(gè)數(shù)據(jù)庫(kù)就是一個(gè)命名對(duì)象倉(cāng)庫(kù)（object store）的集合，對(duì)象存儲(chǔ)區(qū)存儲(chǔ)的是對(duì)象。


IndexedDB特點(diǎn)：

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


（1）檢測(cè)瀏覽器是否支持IndexedDB API

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

（2）訪(fǎng)問(wèn)數(shù)據(jù)庫(kù)

要異步訪(fǎng)問(wèn)數(shù)據(jù)庫(kù)，就要調(diào)用 window 對(duì)象 indexedDB 屬性的 open() 方法

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

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


open方法返回一個(gè) IDBRequest 對(duì)象 (IDBOpenDBRequest)，


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


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

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

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

request.onupgradeneeded = function(e){}

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

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


（3）IndexedDB實(shí)例對(duì)象的方法


3.1 createObjectStore()方法

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

db.createObjectStore(name[,options]);

參數(shù)說(shuō)明：

參數(shù)name是對(duì)象倉(cāng)庫(kù)的名字；options是可選參數(shù)，用來(lái)設(shè)置對(duì)象倉(cāng)庫(kù)的屬性，可配置兩個(gè)屬性：keyPath和autoIncrement，分別表示每條記錄的鍵名和是否使用自動(dòng)遞增的整數(shù)作為鍵名，默認(rèn)為false。

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


由于對(duì)象倉(cāng)庫(kù)的名字具有唯一性（當(dāng)創(chuàng)建已存在的數(shù)據(jù)庫(kù)時(shí)，會(huì)報(bào)錯(cuò)），所以在創(chuàng)建對(duì)象倉(cāng)庫(kù)時(shí)，我們有必要檢測(cè)對(duì)象倉(cāng)庫(kù)是否已存在：

db.objectStoreNames.contains(name)

objectStoreNames屬性返回一個(gè)DOMStringList對(duì)象，里面包含了當(dāng)前數(shù)據(jù)庫(kù)所有“對(duì)象倉(cāng)庫(kù)”的名稱(chēng)。可以使用DOMStringList對(duì)象的contains方法，檢查數(shù)據(jù)庫(kù)是否包含某個(gè)“對(duì)象倉(cāng)庫(kù)”。


3.2 transaction方法

創(chuàng)建了數(shù)據(jù)庫(kù)，當(dāng)然要使用它，不過(guò)數(shù)據(jù)庫(kù)的更新、讀取和刪除是建立在事務(wù)的基礎(chǔ)上的，所以我們首先要?jiǎng)?chuàng)建一個(gè)事務(wù)：

var t = db.transaction(array,type)

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

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

transaction()方法返回一個(gè)事務(wù)對(duì)象，該對(duì)象的objectStore()方法用于獲取指定的對(duì)象倉(cāng)庫(kù)：

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

事務(wù)對(duì)象有三個(gè)監(jiān)聽(tīng)事件：

abort：事務(wù)中斷。  
complete：事務(wù)完成。  
error：事務(wù)出錯(cuò)。

假如事務(wù)完成時(shí)：

t.oncomplete =function(e){}


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

下面的方法都是在事件對(duì)象上。

（1）add()方法

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

var add = store.add(data,key)

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


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

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


（2）get()方法

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

store.get(key)

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


（3）put()方法

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

var update = store.put(data,key)


（4）delete()方法

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

var delete = store.delete(key)

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


（5）openCursor()方法

openCursor()方法用來(lái)遍歷數(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屬性指向當(dāng)前數(shù)據(jù)對(duì)象。當(dāng)前數(shù)據(jù)對(duì)象的key和value分別返回鍵名和鍵值（即實(shí)際存入的數(shù)據(jù)）。continue方法將光標(biāo)移到下一個(gè)數(shù)據(jù)對(duì)象，如果當(dāng)前數(shù)據(jù)對(duì)象已經(jīng)是最后一個(gè)數(shù)據(jù)了，則光標(biāo)指向null。


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


3.3 createIndex()方法

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

createIndex(index,name,options)

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


3.3.1 index方法

index()方法用于從對(duì)象倉(cāng)庫(kù)返回指定的索引。

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

注意：get方法有可能取回多個(gè)數(shù)據(jù)對(duì)象，因?yàn)閚ame屬性沒(méi)有唯一值。


5、設(shè)備震動(dòng)（Vibration API）

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


（1）檢測(cè)是否可用

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

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

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

（2）振動(dòng)

navigator.vibrate(1000);

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

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

上面代碼表示，設(shè)備先振動(dòng)200毫秒，然后等待100毫秒，再接著振動(dòng)300毫秒。


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


6、屏幕亮度（Luminosity API）

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


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

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

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


7、手機(jī)設(shè)備方向


7.1 方向

Orientation API用于檢測(cè)手機(jī)的擺放方向（豎放或橫放）。

（1）檢測(cè)瀏覽器是否支持

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

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

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

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

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

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

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


7.2 移動(dòng)（motion）

（1）檢測(cè)是否支持

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

（2）和方向事件一樣，移動(dòng)也有監(jiān)聽(tīng)事件：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事件對(duì)象有acceleration、accelerationIncludingGravity、rotationRate和interval四個(gè)屬性。


屬性說(shuō)明：

（1）acceleration、accelerationIncludingGravity

acceleration和accelerationIncludingGravity屬性都包含三個(gè)軸：

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


（2）rotationRate

rotationRate有三個(gè)值： 

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

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

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


（3）interval

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


更多：檢測(cè)設(shè)備方向


簡(jiǎn)單的搖一搖功能：

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é)點(diǎn)的requestFullscreen方法，可以使得這個(gè)節(jié)點(diǎn)全屏。

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

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

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

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

所以為了在 WebKit 下也達(dá)到與 Gecko 同樣的全屏效果，你需要手動(dòng)為元素增加 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對(duì)象的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()

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


8.3 全屏屬性和事件


8.3.1 屬性

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

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

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


8.3.2 全屏事件

fullscreenchange事件：瀏覽器進(jìn)入或離開(kāi)全屏?xí)r觸發(fā)。   

fullscreenerror事件：瀏覽器無(wú)法進(jìn)入全屏?xí)r觸發(fā)，可能是技術(shù)原因，也可能是用戶(hù)拒絕。

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



以上內(nèi)容是否對(duì)您有幫助：
在線(xiàn)筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)