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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.