手機自身的電源管理已經相當不錯了，那為何網頁上還要增加一個HTML5 Battery電池狀態API呢？

隨著HTML5以及CSS3技術支持與發展，以及手機越來越高性能帶來的可行性。移動端的頁面顯然會越來越燒電。例如，流暢的動畫效果，模糊陰影等視覺體驗。因此可能會出現這樣的情況，用戶電量快不行了，又沒有電源來一發，你的網頁還呼呼的燒電，顯然，這不是用戶所愿意看到的。

因此，如果網頁能夠感知手機的電源，我們似乎能夠為用戶做的更多。

屏幕

頁面白色背景變灰一點，或整體暗度降低；

移除gif動圖

移除一些不關鍵的動畫

如果可能的話，避免DOM操作

網絡

停止使用頻繁的Ajax操作

HTML5離線存儲技術

HTML5 WebStorage本地存儲技術

不要請求一些不重要的圖片（如裝飾性圖片）

聽覺和觸覺輸出

線程等其他一些省電的處理。這一里一外的用戶體驗，勢必讓產品更加人性化。

由此可見，HTML5 Battery API還是很有用的。

下面我們來學習一下Battery的使用！

注意：目前唯有手機QQ瀏覽器使用的x5內核比較良好的支持該API。但也只是部分屬性支持，比如chargingTime 和dischargingTime 屬性，顯示的永遠都是infinity（無限）。chargingtimechange 事件和dischargingtimechange 事件無法觸發。

屬性1：charging 表示電池是否在充電

屬性2：chargingTime 表示電池充滿需要的時間

屬性3：dischargingTime 表示電池可用時間

屬性4：level 表示電池當前的電量0 ~ 1

事件1：chargingchange 充電狀態改變觸發

事件2：chargingtimechange 所需充電時間改變觸發

事件3：dischargingtimechange 剩余電量的是使用時間改變觸發

事件4：levelchange 當前電量改變時觸發

案例代碼：

var battery = navigator.battery ||

navigator.webkitBattery ||

navigator.mozBattery ||

navigator.msBattery;

if(battery){

console.log(battery);

log('是否在充電：'+battery.charging);

log('充電時間：'+battery.chargingTime);

log('當前電量能用多長時間：'+battery.dischargingTime);

log('電量百分比：'+(battery.level*100)+'%');

battery.addEventListener("chargingchange", function(e) {

// 充電狀態改變的時候會觸發，例如發現正在充電，果斷不使用節能模式。

log( battery.charging ? "電源已接通":"電源已斷開");

}, false);

battery.addEventListener("levelchange", function (e) {

// 電池電量的百分比改變時候觸發

log('電量百分比：'+(battery.level*100)+'%');

}, false);

battery.addEventListener("chargingtimechange",function(e){

// 還需要充電的時間改變的時候觸發

log('充電時間：'+battery.chargingTime);

},false);

battery.addEventListener("dischargingtimechange",function(e){

// 剩余電量的使用時間改變時候觸發

log('當前電量能用多長時間：'+battery.dischargingTime);

},false);

}

else{

console.log(battery);

document.write('你的瀏覽器不支持Battery API');

}

function log(str){

document.write(str+'<br>');

};

總結

以上是生活随笔為你收集整理的HTML5 API详解（3）：为何网页上要增加Battery电池状态API的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。