幾個有趣的WEB設備API 前端提高B格必備（一）——電池狀態&震動api

受到同事啟發，突然發現了幾個有趣又實用的web api，沒想到前端還有這么多有趣的東西可以玩~~簡直過分。

 

1.電池狀態API

navigator.getBattery()：這個api返回的是一個promise對象，會給出一個BatteryManager對象，對象中包含了：設備是否在充電，電量，以及還需充電時長和剩余時長等信息。

chrome瀏覽器、安卓的webview、iphone都可以使用。ie，safari不管是pc還是移動端都不支持。

 

調用方法如下：

navigator.getBattery().then(function(battery) {
　　console.log(battery)
});

console.log打出如下：

這里我們可以看到返回的對象中有

屬性

charging：是否充電；

chargingTime：如果是在充電，還需充電時間；

dischargingTime:電池可用時間

level：剩余電量百分數(是個小數，顯示的時候需要處理)

 

一些可以監聽的事件：

onchargingchange:監聽充電狀態的改變

onchargingtimechange：監聽充電時間的改變

ondischargingtimechange：監聽電池可用時間的改變

onlevelchange：監聽剩余電量百分數的改變。　　

 

例子：

if('getBattery' in navigator){
   navigator.getBattery().then(function(battery) {
    /*
      判斷是否在充電
    */
    if(battery.charging){
      $('.isbattery').show();
      $('.notbattery').hide();

    }else{
      $('.isbattery').hide();
      $('.notbattery').show();      
    }

    /*
      判斷剩余電量
    */
     if(battery.level>=1){
      $('.batlevel').html('電池狀態：<span class="perbattery_100">電量充沛 ^_^   還有'+battery.level*100+'%</span>');
    }else if(battery.level>=0.5){
      $('.batlevel').html('電池狀態：<span class="perbattery_50">電量還好 @_@  還有'+battery.level*100+'%</span>');     
    }else{
      $('.batlevel').html('電池狀態：<span class="perbattery_30">啊！快沒電了 *_*  還有'+battery.level*100+'%</span>'); 
    }

   /*
      電池事件
    */
     battery.addEventListener('chargingchange', function(){
      alert("充電狀態改變："+ (battery.charging ? "開始充電" : "不充了"));
     });

}else{
     $('#batteryarea').text('您的瀏覽器不支持電池狀態接口');
}

 

上面的代碼可以判斷出設備是否在充電，以及剩余的電量，移動端和pc端都可以使用。

首先判斷了瀏覽器是否支持這個api；

然后調用navigator.getBattery()接口，由於返回的是promise對象，所以我們使用then()來獲取返回的數據。

瀏覽器返回了BatteryManager對象，然后我們在then的函數內部利用返回的數據寫邏輯。

效果如下：

 

全部例子：Demo （狀態改變時有alert，請不要關閉瀏覽器的alert功能）

 

2.震動API

震動在很多游戲及一些h5宣傳效果中得到應用，成為一個特色，比如在一些游戲中被地方攻擊到的時候讓手機產生震動，出現某個效果的時候產生震動，等等。

我們還可以控制它的震動頻率。這個api就是:

window.navigator.vibrate(200)

瀏覽器支持情況：pc端 chrome和火狐支持，ie、opera、Safari不支持

　　　　　　　　移動端 Android和火狐是支持的，而蘋果手機是不會震動的~~

 

調用方法：

window.navigator.vibrate([200, 100, 200]);

參數可以使一個數組，其中設定了震動的頻率，震動200ms，然后休息100ms，然后再次震動200ms；

取消震動把參數設置為0即可window.navigator.vibrate(0);

這個沒有可視化的例子，請在下面的demo中感受~

 

例子：Demo（會震動，請拿好易碎的安卓機~） 

 

 

內容原創，轉載請注明出處：

作者：Jess_喵

來源：http://www.cnblogs.com/zhangwenjiajessy/p/6240918.html