


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
- functionisBatteryStatusSupported() {
- return!!(navigator.battery || navigator.mozBattery);
- }
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.
- >
- <htmllanghtmllang="en">
- <head>
- <title>The Battery Status API - Exampletitle>
- <metacharsetmetacharset="UTF-8"/>
- <script>
- 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);
- script>
- head>
- <body>
- <dividdivid="stats">
- Your battery is currently <spanidspanid="charging">span>.<br/>
- Your battery will be charged in <spanidspanid="chargingtime">span> seconds.<br/>
- Your battery will be discharged in <spanidspanid="dischargingtime">span> seconds.<br/>
- Your battery level is <spanidspanid="level">span>%.
- div>
- body>
- html>
结论
本文为Battery Status API给出了一个完整的总结和展示,尽管其仍未得到主流支持,但是这只是时间问题。考虑到移动互联网的激增,开发者应该尽快将电池信息纳入设计范畴内。

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics



Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.

This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.

Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.

Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.

Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively

Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.

Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.

Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.
