标签：分享图片 style 有趣的 else webapi blank col 暂停 商业
本篇文章主要选取了几个有趣且有用的webapi进行介绍，分别介绍其用法、用处以及浏览器支持度
device orientation（陀螺仪，获取用户手机朝向）
battery status 获取用户手机电量
window.addEventListener(‘blur‘,() => {}) window.addEventListener(‘visibilitychange‘,() => { // 通过这个方法来获取当前标签页在浏览器中的激活状态。 switch(document.visibilityState){ case‘prerender‘: // 网页预渲染 但内容不可见 case‘hidden‘: // 内容不可见 处于后台状态，最小化，或者锁屏状态 case‘visible‘: // 内容可见 case‘unloaded‘: // 文档被卸载 } });
用处：在当前标签页是count数量会自动增加，不在当前标签页时count会停止增加，这个API的用处就是用来响应我们网页的状态，比如说我们的页面是在播放视频或者是一个网页的游戏，你可以通过这个API来去做出对应的响应，暂停视频，游戏暂停等等。
这个API就很简单了，就是获取当前的网络状态，同时也有对应的事件去响应网络状态的变化。
window.addEventListener(‘online‘,onlineHandler)
window.addEventListener(‘offline‘,offlineHandler)
通过绑定事件来获取设备的物理朝向，可以获取到三个数值，分别是：
用法
window.addEventListener(‘deviceorientation‘,e => { console.log(‘Gamma:‘,e.gamma); console.log(‘Beta:‘,e.beta); console.log(‘Alpha:‘,e.Alpha); })
这个API就使用来获取当前的电池状态
用法：
// 首先去判断当前浏览器是否支持此API if (‘getBattery‘ in navigator) { // 通过这个方法来获取battery对象 navigator.getBattery().then(battery => { // battery 对象包括中含有四个属性 // charging 是否在充电 // level 剩余电量 // chargingTime 充满电所需事件 // dischargingTime 当前电量可使用时间 const { charging, level, chargingTime, dischargingTime } = battery; // 同时可以给当前battery对象添加事件 对应的分别时充电状态变化 和 电量变化 battery.onchargingchange = ev => { const { currentTarget } = ev; const { charging } = currentTarget; }; battery.onlevelchange = ev => { const { currentTarget } = ev; const { level } = ev; } }) } else { alert(‘当前浏览器不支持~~~‘)
这是demo的URL：https://github.com/1921622004/webapi
文章来源，我这只做个个人的标记，挺有趣的
作者：awesome23
标签：分享图片 style 有趣的 else webapi blank col 暂停 商业
原文地址：https://www.cnblogs.com/Dobin/p/10289202.html
