HTML5 規(guī)范已經(jīng)越來越成熟，可以讓你訪問更多來自設(shè)備的信息，其中包括最近提交的 "Battery Status API"。如其名稱所示，該 API 允許你通過 JavaScript 來獲取電池的狀態(tài)。因此通過使用這個 API 來判斷當前正在使用電池供電，可避免運行一些重量級的 JavaScript 動畫，提醒用戶注意保存數(shù)據(jù)。如果你希望測試這個 API，這里有一個實際的例子。注意這個例子中電池剩余時間在我打開網(wǎng)頁時是不可用的，幾分鐘后才正常顯示。
我在最新的 Beta 版的 Mozilla 瀏覽器進行測試，目前還不支持 Mac ，但可以在 Windows、Android 和 iOS 上使用。在充電的時候也無法獲取正確的數(shù)據(jù)。這里我們要制作一個簡單的頁面，顯示如下的電池信息數(shù)據(jù)：
此文章接下來將包含如下內(nèi)容：
- 如何使用電池 API
- 創(chuàng)建一些文本域來顯示從 API 中獲取的數(shù)據(jù)
- 創(chuàng)建一個電池圖片用來顯示剩余電量
- 使用事件偵聽器來更新顯示的數(shù)據(jù)
接下來我們對 API 做一個簡單快速的瀏覽。
如何使用電池 API
使用這個 API 非常簡單，下面是你可以通過 API 獲取的屬性信息：
[NoInterfaceObject]
interface BatteryManager : EventTarget {
readonly attribute boolean charging;
readonly attribute double chargingTime;
readonly attribute double dischargingTime;
readonly attribute double level;
};
其中 charging 屬性用來指示當前是否正在充電，chargingTime 返回完成充電還需要的時間，而 dischargingTime 顯示當前電量能使用多長時間，最后一個是 level 顯示電池電量的百分比，非常直觀。
除了上述的一些屬性外，API 還定義了一些回調(diào)函數(shù)：
[TreatNonCallableAsNull]
attribute Function? onchargingchange;
[TreatNonCallableAsNull]
attribute Function? onchargingtimechange;
[TreatNonCallableAsNull]
attribute Function? ondischargingtimechange;
[TreatNonCallableAsNull]
attribute Function? onlevelchange;
你可以將自己寫的函數(shù)注冊到這些回調(diào)函數(shù)里來獲取屬性的變化信息。
創(chuàng)建一些文本域來顯示從 API 中獲取的數(shù)據(jù)
下面我們開始來制作電池信息顯示的頁面，我們創(chuàng)建了如下的頁面文件：
<div id="box">
<div id="battery"></div>
<div id="text">
<span style="display: block;margin-bottom:15px;font-size: xx-large;"><strong>Battery
specifications</strong></span>
<span style="display: block" id="level">Battery level: unknown</span>
<span style="display: block" id="status">Charging status: unknown</span>
<span style="display: block" id="charged">Battery charged: unknown</span>
</div>
</div>
然后使用如下 JavaScript 代碼來確保其初始顯示正確的電池數(shù)據(jù)：
// get the battery information
var battery = navigator.mozBattery;
// get the battery information to be displayed
$('#level').text("Battery level: " + Math.round(battery.level * 100) + "%");
$('#status').text("Charging status: " + ((battery.charging) ? "true" : "false"));
if (battery.charging) {
$('#charged').text("Battery time to charge: " + battery.chargingTime);
} else {
$('#charged').text("Battery time left: " + (Math.round(battery.dischargingTime / 60)) + " minutes");
}
如你在代碼中所看的，非常的簡單，接下來我們還要生成一個用來指示電池剩余電量的圖片。
創(chuàng)建一個電池圖片用來顯示剩余電量
我不想過多討論這個細節(jié)，因為很無趣。你可以從 source code from the example 了解詳情. 我們創(chuàng)建了一個簡單的電池對象，提供一個 updateBattery 的調(diào)用可以了解電池的電量狀態(tài)：
var b = new Battery("assets/bat_empty.png", "assets/bat_full.png", 96, 168);$("#battery").append(b.domElement);
b.updateBattery(battery.level * 100);
使用事件偵聽器來更新顯示的數(shù)據(jù)
最后我們添加一些事件偵聽器來即時的處理電池電量變化后數(shù)據(jù)顯示的更新：
// when the loader is connected
battery.addEventListener("chargingchange", function (e) {
$('#status').text("Charging status: " + ((battery.charging) ? "true" : "false"));
}, false);
// when charging time changes update the time to charge / time left
battery.addEventListener("chargingtimechange", function (e) {
if (battery.charging) {
$('#charged').text("Battery time to charge: " + battery.chargingTime);
} else {
$('#charged').text("Battery time left: " + (Math.round(battery.dischargingTime / 60)) + " minutes");
}
}, false);
// when dischargingtime changes update the time to charge / time left
battery.addEventListener("dischargingtimechange", function (e) {
if (battery.charging) {
$('#charged').text("Battery time to charge: " + (Math.round(battery.dischargingTime / 60)) + " minutes");
} else {
$('#charged').text("Battery time left: " + (Math.round(battery.dischargingTime / 60)) + " minutes");
}
}, false);
// listener that is notified when the level changes
battery.addEventListener("levelchange", function (e) {
$('#level').text("Battery level: " + Math.round(battery.level * 100) + "%");
b.updateBattery(100 * battery.level)
}, false);
很簡單吧？下面是在我手機上運行的結(jié)果。
在 Windows 上運行的結(jié)果：
