HTML5的一個顯示電池狀態的API簡介_html5教學技巧

行動裝置的份額在網路流量中大量成長，其所貢獻的網路流量非常龐大，以至於為了行動設備，我們單獨創建了一些API和設計理念。一個非常典型的例子是 W3C電池狀態API，它允許一個應用程式獲知設備的電池狀態資訊。這篇文章探討了這個新的API，為你展示如何把它整合進你現有的應用程式。
 偵測設備是否支援

目前電池API依舊沒有主流支援。因此，在使用這個API之前需要確認目前裝置是否支援此API。以下所示的函數傳回一個布恩值(True/False)，指示目前瀏覽器是否支援電池狀態API。

此函數首先檢測了 navigator.battery 物件是否存在。如果不存在，繼續偵測 Mozilla 專用的

navigator.mozBattery是否存在。我曾經看過有些程式碼也偵測了 webkitBattery對象，但我無法證實其在Chrome中是否存在。

參考文件：https://developer.mozilla.org/en-US/docs/DOM/window.navigator.battery
 

XML/HTML Code複製內容到剪貼簿

1. functionisBatteryStatusSupported() {   
2.   return!!(navigator.battery || navigator.mozBattery);   
3. }  

檢查電池

如果電池物件存在，它會包含下列四個唯讀屬性。

•     charging —— （布恩值）指示系統的電池目前是否正在充電。

    若係統不存在電池，或無法確定電池是否在充電，回傳值是 True

•     chargingTime —— （數值）電池完全充滿電量所需的時間（單位：秒）

    當電池完全被充滿電時，或係統不存在電池時，此值為0。

    若係統不在充電，或無法確定完全充飽電所需時間，此值為∞（無限大）。

•     dischargingTime —— 和chargingTime相似，（數值）到電池完全放電直到系統休眠剩餘的時間（單位：秒）

    若放電時間無法確定，或 系統沒有電池 或 系統正在充電，這個值為 ∞ （無限大）

•     level —— (數值) 設備目前電量等級。取值在(0 ~ 1.0)區間，與剩餘電量百分比對應。

    1.0表示電池完全充滿電，或不存在電池，或數值無法確定。

偵測電池事件

上述所有屬性都與一個電池事件綁定。這些事件用來指示電池狀態的變化。例如，插入電源會使charging屬性從false變成true。全部四種電池事件如下所列：

•     chargingchange —— 這個類型的事件會在charging屬性改變時觸發。這個事件可以被 onchargingchange()事件處理器捕捉和處理。
      chargingtimechange —— 這個類型的事件會在chargingtime屬性改變時觸發。這個事件可以被 onchargingtimechange()事件處理器捕捉和處理。
      dischargingtimechange —— 這個類型的事件會在dischargingTime屬性改變時觸發。這個事件可以被 ondischargingtimechange()事件處理器捕捉並處理。
      levelchange —— 這個類型的事件會在level屬性改變時觸發。這個事件可以被 onlevelchange()事件處理器捕捉並處理。

 
範例頁

下面的程式碼顯示如何使用 電池狀態API 的屬性和事件。

範例頁面顯示了API的各個屬性值，並且在事件觸發時更新它們的值。

點擊此處訪問線上範例。
 

XML/HTML Code複製內容到剪貼簿

1. html>  
2. htmllanghtmllang="en="en"
3.   
頭>
4.      標題>電池狀態API - 範例>標題>
5.      元字符集元字符集="UTF-8"/>
6.      腳本>
7.   
8.     window.addEventListener("load", function() {          var 電池 = 導航器.電池o>
9.       函數 displayBatteryStats() {   
10.         document.getElementById("正在充電").textContent  🎜>         document.getElementById("充電時間")
.textContent
11.  🎜>         document.getElementById("dischargingtime").textContent =mm.textContent =Sm
.textContent
12. 🎜 >         document.getElementById("level").textContent  >       }   
13.       如果（電池） {            displayBatteryStats();            battery.addEventListener("chargingchange", displayBatteryStats, false);   
14.         battery.addEventListener("chargingtimechange", displayBatteryStats, false);   
15.         battery.addEventListener("dischargingtimechange", displayBatteryStats, false);   
16.         battery.addEventListener("levelchange", displayBatteryStats, false);   
17.       } 其他 {   
18.         document.getElementById("stats")
19. .textContent == >
;   
      }   
    }， 錯誤的）;   
22.   腳本>  
23. 頭>  
24. 身體>  
25.   除除=「統計」=「統計」
26.        您的電池目前為
spanidspanid=spanid=spanid 🎜 >>跨度>. br/>       您的電池將在spanidspanid=spanid=spanid=spanid >
27. 跨度> 秒。 br/>       您的電池將在spanidspanid=spanid
=
28. spanid=spanid放電>跨度> 秒。 br
/>
29.        您的電池電量為spanid
spanid
30. >>跨度>%。   
31.   div>  

身體

>

   html>   結論 只是本文為電池狀態考慮API給出了完整的總結和展示，儘管其尖端得到主流支持，但是這個時間問題。到行動互聯網的激增，開發者應該加速將電池資訊納入設計國家內部。