A few interesting web device API front-end to improve the B-grid required (a)--Battery Status & Vibration API

Inspired by colleagues, suddenly found a few interesting and useful Web API, did not think of the front end there are so many interesting things to play ~ ~ Too much.

1. Battery Status API

Navigator.getbattery (): This API returns a Promise object that gives a Batterymanager object that contains information such as whether the device is charging, power, and how long and how long it will take to charge.

Chrome browser, Android WebView, iphone are all available. Ie,safari is not supported either on the PC or on the mobile side.

The calling method is as follows:

Navigator.getbattery (). Then (function (battery) {console.log (battery)});

Console.log is typed as follows:

Here we can see that the returned object has

Property

Charging: whether to charge;

Chargingtime: Charging time is required if it is in charge;

Dischargingtime: Battery Available time

Level: Percentage of remaining power (it is a decimal number, which needs to be handled when displayed)

Some of the events that can be monitored :

Onchargingchange: Monitor the change of charging status

Onchargingtimechange: Monitoring the change in charging time

Ondischargingtimechange: Monitor the change in battery available time

Onlevelchange: Monitor the change in percentage of remaining power.　　

Example:

if (' Getbattery ' in navigator) {navigator.getbattery (). Then (function (battery) {/* determines if the charge */if (battery.ch      arging) {$ ('. Isbattery '). Show ();    $ ('. Notbattery '). Hide ();      }else{$ ('. Isbattery '). Hide ();          $ ('. Notbattery '). Show (); }/* Determine the remaining charge */if (battery.level>=1) {$ ('. Batlevel '). html (' Battery status: <span class= ' perbattery_100 ' > Power    Abundant ^_^ also ' +battery.level*100+ '%</span> '); }else if (battery.level>=0.5) {$ ('. Batlevel '). html (' Battery status: <span class= ' perbattery_50 ' > battery OK @[email protected         ] and ' +battery.level*100+ '%</span> '); }else{$ ('. Batlevel '). html (' Battery status: <span class= ' perbattery_30 ' > Ah!     It's almost out of power. *_* also ' +battery.level*100+ '%</span> '); }/* Battery event */battery.addeventlistener (' Chargingchange ', function () {alert ("Charge status changed:" + (battery.charging ?     "Start charging": "Not Charged")); });} else{$ (' #batteryarea '). Text (' Your browser does not support battery status interface ');}

The above code can determine whether the device is charging, and the remaining power, both mobile and PC-side can be used.

First determine whether the browser supports this API;

The Navigator.getbattery () interface is then called, because the Promise object is returned, so we use then () to get the returned data.

The browser returns the Batterymanager object, and then we use the returned data to write logic inside the then function.

The effect is as follows:

All examples: Demo (Alert when status is changed, please do not close the alert function of the browser)

2. Vibration API

Vibration in a lot of games and some of the H5 propaganda effect has been applied to become a feature, such as in some games by the local attack on the phone when the vibration, the occurrence of a certain effect when the vibration, and so on.

We can also control the frequency of its vibrations. This API is:

Window.navigator.vibrate (200)

Browser support: PC-side Chrome and Firefox support, ie, opera, Safari does not support

Mobile Android and Firefox are supported, and the iphone will not vibrate ~ ~

Call Method:

Window.navigator.vibrate ([200, 100, 200]);

Parameters can make an array, which sets the frequency of vibrations, vibrates 200ms, then rests 100ms, then vibrates 200ms again;

Cancel the vibration set the parameter to 0 window.navigator.vibrate (0);

This is not a visual example, please feel in the demo below ~

Example: Demo (will vibrate, please take the fragile Andro ~)

Original content, reproduced please specify the source:

Jess_ Meow

Source: http://www.cnblogs.com/zhangwenjiajessy/p/6240918.html

A few interesting web device API front-end to improve the B-grid required (a)--Battery Status & Vibration API