【HTML5】使用 JavaScript 来获取电池状态（Battery Status API）

HTML5 规范已经越来越成熟，可以让你访问更多来自设备的信息，其中包括最近提交的 "Battery Status API"。如其名称所示，该 API 允许你通过 JavaScript 来获取电池的状态。因此通过使用这个 API 来判断当前正在使用电池供电，可避免运行一些重量级的 JavaScript 动画，提醒用户注意保存数据。如果你希望测试这个 API，这里有一个实际的例子。注意这个例子中电池剩余时间在我打开网页时是不可用的，几分钟后才正常显示。

我在最新的 Beta 版的 Mozilla 浏览器进行测试，目前还不支持 Mac ，但可以在 Windows、Android 和 iOS 上使用。在充电的时候也无法获取正确的数据。这里我们要制作一个简单的页面，显示如下的电池信息数据：





此文章接下来将包含如下内容：

如何使用电池 API

创建一些文本域来显示从 API 中获取的数据

创建一个电池图片用来显示剩余电量

使用事件侦听器来更新显示的数据

接下来我们对 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 还定义了一些回调函数：

[TreatNonCallableAsNull]
attribute Function? onchargingchange;
[TreatNonCallableAsNull]
attribute Function? onchargingtimechange;
[TreatNonCallableAsNull]
attribute Function? ondischargingtimechange;
[TreatNonCallableAsNull]
attribute Function? onlevelchange;

你可以将自己写的函数注册到这些回调函数里来获取属性的变化信息。

创建一些文本域来显示从 API 中获取的数据

下面我们开始来制作电池信息显示的页面，我们创建了如下的页面文件：

<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 代码来确保其初始显示正确的电池数据：

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

如你在代码中所看的，非常的简单，接下来我们还要生成一个用来指示电池剩余电量的图片。

创建一个电池图片用来显示剩余电量

我不想过多讨论这个细节，因为很无趣。你可以从 source code from the example 了解详情. 我们创建了一个简单的电池对象，提供一个 updateBattery 的调用可以了解电池的电量状态：

var b = new Battery("assets/bat_empty.png", "assets/bat_full.png", 96, 168);
$("#battery").append(b.domElement);
b.updateBattery(battery.level * 100);

使用事件侦听器来更新显示的数据

最后我们添加一些事件侦听器来即时的处理电池电量变化后数据显示的更新：

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

很简单吧？下面是在我手机上运行的结果。





在 Windows 上运行的结果：