首页 > 代码库 > 几个有趣的WEB设备API 前端提高B格必备(一)——电池状态&震动api
几个有趣的WEB设备API 前端提高B格必备(一)——电池状态&震动api
受到同事启发,突然发现了几个有趣又实用的web api,没想到前端还有这么多有趣的东西可以玩~~简直过分。
1.电池状态API
navigator.getBattery():这个api返回的是一个promise对象,会给出一个BatteryManager对象,对象中包含了:设备是否在充电,电量,以及还需充电时长和剩余时长等信息。
chrome浏览器、安卓的webview、iphone都可以使用。ie,safari不管是pc还是移动端都不支持。
调用方法如下:
navigator.getBattery().then(function(battery) { console.log(battery) });
console.log打出如下:
这里我们可以看到返回的对象中有
属性
charging:是否充电;
chargingTime:如果是在充电,还需充电时间;
dischargingTime:电池可用时间
level:剩余电量百分数(是个小数,显示的时候需要处理)
一些可以监听的事件:
onchargingchange:监听充电状态的改变
onchargingtimechange:监听充电时间的改变
ondischargingtimechange:监听电池可用时间的改变
onlevelchange:监听剩余电量百分数的改变。
例子:
if(‘getBattery‘ in navigator){ navigator.getBattery().then(function(battery) { /* 判断是否在充电 */ if(battery.charging){ $(‘.isbattery‘).show(); $(‘.notbattery‘).hide(); }else{ $(‘.isbattery‘).hide(); $(‘.notbattery‘).show(); } /* 判断剩余电量 */ if(battery.level>=1){ $(‘.batlevel‘).html(‘电池状态:<span class="perbattery_100">电量充沛 ^_^ 还有‘+battery.level*100+‘%</span>‘); }else if(battery.level>=0.5){ $(‘.batlevel‘).html(‘电池状态:<span class="perbattery_50">电量还好 @_@ 还有‘+battery.level*100+‘%</span>‘); }else{ $(‘.batlevel‘).html(‘电池状态:<span class="perbattery_30">啊!快没电了 *_* 还有‘+battery.level*100+‘%</span>‘); } /* 电池事件 */ battery.addEventListener(‘chargingchange‘, function(){ alert("充电状态改变:"+ (battery.charging ? "开始充电" : "不充了")); }); }else{ $(‘#batteryarea‘).text(‘您的浏览器不支持电池状态接口‘); }
上面的代码可以判断出设备是否在充电,以及剩余的电量,移动端和pc端都可以使用。
首先判断了浏览器是否支持这个api;
然后调用navigator.getBattery()接口,由于返回的是promise对象,所以我们使用then()来获取返回的数据。
浏览器返回了BatteryManager对象,然后我们在then的函数内部利用返回的数据写逻辑。
效果如下:
全部例子:Demo (状态改变时有alert,请不要关闭浏览器的alert功能)
2.震动API
震动在很多游戏及一些h5宣传效果中得到应用,成为一个特色,比如在一些游戏中被地方攻击到的时候让手机产生震动,出现某个效果的时候产生震动,等等。
我们还可以控制它的震动频率。这个api就是:
window.navigator.vibrate(200)
浏览器支持情况:pc端 chrome和火狐支持,ie、opera、Safari不支持
移动端 Android和火狐是支持的,而苹果手机是不会震动的~~
调用方法:
window.navigator.vibrate([200, 100, 200]);
参数可以使一个数组,其中设定了震动的频率,震动200ms,然后休息100ms,然后再次震动200ms;
取消震动把参数设置为0即可window.navigator.vibrate(0);
这个没有可视化的例子,请在下面的demo中感受~
例子:Demo(会震动,请拿好易碎的安卓机~)
内容原创,转载请注明出处:
作者:Jess_喵
来源:http://www.cnblogs.com/zhangwenjiajessy/p/6240918.html
几个有趣的WEB设备API 前端提高B格必备(一)——电池状态&震动api