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

This article mainly introduces the HTML5 how to use the battery status API properties and events related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe you will have something to gain after reading this HTML5 how to use the battery status API properties and events article, let's take a look at it.

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.

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 article on "how to use the properties and events of the battery status API in HTML5". Thank you for reading! I believe you all have some knowledge about "how to use the properties and events of battery status API in HTML5". If you want to learn more, you are welcome to follow the industry information channel.

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.