Introduction to an API for displaying battery status in HTML5_html5 tutorial skills

The share of mobile devices in network traffic is growing significantly, and the network traffic they contribute is so huge that we have created some APIs and design concepts separately for mobile devices. A very typical example is the W3C Battery Status API, which allows an application to obtain the battery status information of the device. This article explores this new API and shows you how to integrate it into your existing applications.
Check whether the device supports

At present, the battery API still does not have mainstream support. Therefore, before using this API, you need to confirm whether the current device supports this API. The function shown below returns a Boone value (True/False) indicating whether the current browser supports the battery status API.

This function first detects whether the navigator.battery object exists. If not present, continue to detect Mozilla-specific

Whether navigator.mozBattery exists. I've seen some code that also detects the webkitBattery object, but I can't confirm that it exists in Chrome.

Reference documentation: https://developer.mozilla.org/en-US/docs/DOM/window.navigator.battery

XML/HTML CodeCopy content to clipboard

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

Check the battery

If the battery object exists, it will contain the following four read-only properties.

• Charging - (Boone value) Indicates whether the system's battery is currently charging.

If there is no battery in the system, or it cannot be determined whether the battery is charging, the return value is True

• chargingTime - (numeric value) The time it takes for the battery to be fully charged (unit: seconds)

When the battery is fully charged, or there is no battery in the system, this value is 0.

If the system is not charging, or the time required to fully charge cannot be determined, this value is ∞ (infinity).

• dischargingTime - similar to chargingTime, (numeric value) the remaining time (unit: seconds) until the battery is completely discharged and the system goes to sleep (unit: seconds)

If the discharge time cannot be determined, or the system has no battery or the system is charging, this value is ∞ (infinity)

• level —— (numeric value) The current power level of the device. The value is in the range of (0 ~ 1.0), corresponding to the remaining power percentage.

1.0 means the battery is fully charged, or there is no battery, or the value cannot be determined.

Detect battery events

All the above properties are bound to a battery event. These events are used to indicate changes in battery status. For example, plugging in a power source changes the charging property from false to true. All four battery events are listed below:

• chargingchange - This type of event will be triggered when the charging attribute changes. This event can be captured and handled by the onchargingchange() event handler.
  Chargingtimechange - This type of event will be triggered when the chargingtime attribute changes. This event can be captured and handled by the onchargingtimechange() event handler.
  dischargingtimechange - This type of event will be triggered when the dischargingTime property changes. This event can be captured and handled by the ondischargingtimechange() event handler.
  Levelchange - This type of event will be triggered when the level attribute changes. This event can be captured and handled by the onlevelchange() event handler.

Sample page

The following code shows how to use the properties and events of the Battery Status API.

The sample page displays the various property values ​​of the API and updates their values ​​when the event is triggered.

Click here to access online examples.

XML/HTML CodeCopy content to clipboard

1. html>  
2. htmllanghtmllang="en">  
3. head>  
4.   title>The Battery Status API - Exampletitle>  
5.   metacharsetmetacharset="UTF-8"/>  
6.   script>  
7.     window.addEventListener("load", function() {   
8.       var battery = navigator.battery || navigator.mozBattery;   
9.       function displayBatteryStats() {   
10.         document.getElementById("charging").textContent = (battery.charging) ? "charging" : "not charging";   
11.         document.getElementById("chargingtime").textContent = battery.chargingTime;   
12.         document.getElementById("dischargingtime").textContent = battery.dischargingTime;   
13.         document.getElementById("level").textContent = battery.level * 100;   
14.       }   
15.       if (battery) {   
16.         displayBatteryStats();   
17.         battery.addEventListener("chargingchange", displayBatteryStats, false);   
18.         battery.addEventListener("chargingtimechange", displayBatteryStats, false);   
19.         battery.addEventListener("dischargingtimechange", displayBatteryStats, false);   
20.         battery.addEventListener("levelchange", displayBatteryStats, false);   
21.       } else {   
22.         document.getElementById("stats").textContent = "Sorry, your browser does not support the Battery Status API";   
23.       }   
24.     }, false);   
25.   script>  
26. head>  
27. body>  
28.   dividdivid="stats">  
29.     Your battery is currently spanidspanid="charging">span>.br/>  
30.     Your battery will be charged in spanidspanid="chargingtime">span> seconds.br/>  
31.     Your battery will be discharged in spanidspanid="dischargingtime">span> seconds.br/>  
32.     Your battery level is spanidspanid="level">span>%.   
33.   div>  
34. body>  
35. html>  

结论

本文为Battery Status API给出了一个完整的总结和展示，尽管其仍未得到主流支持，但是这只是时间问题。考虑到移动互联网的激增，开发者应该尽快将电池信息纳入设计范畴内。