Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of "how to understand the API of HTML5 displaying battery status". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Check whether the device supports

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

This function first detects the existence of the navigator.battery object. If it does not exist, continue to detect the Mozilla-specific

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

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

XML/HTML Code copies content to the clipboard

FunctionisBatteryStatusSupported () {

Navigator.battery! (navigator.battery | | navigator.mozBattery)

}

Check the battery

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

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

If the system does not have a battery, or cannot determine if the battery is charging, the return value is True

ChargingTime-(value) the time it takes for the battery to be fully charged (in seconds)

This value is 0 when the battery is fully charged, or when the system does not have a battery.

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

DischargingTime-similar to chargingTime, the remaining time (in seconds) until the battery is fully discharged until the system is dormant

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

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

1.0 indicates that the battery is fully charged, either the battery does not exist, or the value cannot be determined.

Detect battery events

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

Chargingchange-this type of event is triggered when the charging property changes. This event can be captured and handled by the onchargingchange () event handler.

Chargingtimechange-this type of event is triggered when the chargingtime property changes. This event can be captured and handled by the onchargingtimechange () event handler.

Dischargingtimechange-this type of event is triggered when the dischargingTime property changes. This event can be captured and handled by the ondischargingtimechange () event handler.

Levelchange-this type of event is triggered when the level property 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 shows the individual property values of the API and updates their values when the event is triggered.

Click here to access the online example.

XML/HTML Code copies content to the clipboard

The Battery Status API-Example

Window.addEventListener ("load", function () {

Var battery = navigator.battery | | navigator.mozBattery

Function displayBatteryStats () {

Document.getElementById ("charging"). TextContent = (battery.charging)? "charging": "not charging"

Document.getElementById ("chargingtime") .textContent = battery.chargingTime

Document.getElementById ("dischargingtime") .textContent = battery.dischargingTime

Document.getElementById ("level") .textContent = battery.level * 100

}

If (battery) {

DisplayBatteryStats ()

Battery.addEventListener ("chargingchange", displayBatteryStats, false)

Battery.addEventListener ("chargingtimechange", displayBatteryStats, false)

Battery.addEventListener ("dischargingtimechange", displayBatteryStats, false)

Battery.addEventListener ("levelchange", displayBatteryStats, false)

} else {

Document.getElementById (stats) .textContent = "Sorry, your browser does not support the Battery Status API"

}

}, false)

Your battery is currently.

Your battery will be charged in seconds.

Your battery will be discharged in seconds.

Your battery level is%.

This is the end of the content of "how to understand the API of HTML5 showing battery status". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.