掘进上发现的有趣web api
2021-06-19 04:05
标签：分享图片 style 有趣的 else webapi blank col 暂停 商业 本篇文章主要选取了几个有趣且有用的webapi进行介绍，分别介绍其用法、用处以及浏览器支持度 device orientation（陀螺仪，获取用户手机朝向） battery status 获取用户手机电量 用处：在当前标签页是count数量会自动增加，不在当前标签页时count会停止增加，这个API的用处就是用来响应我们网页的状态，比如说我们的页面是在播放视频或者是一个网页的游戏，你可以通过这个API来去做出对应的响应，暂停视频，游戏暂停等等。 这个API就很简单了，就是获取当前的网络状态，同时也有对应的事件去响应网络状态的变化。 通过绑定事件来获取设备的物理朝向，可以获取到三个数值，分别是： 用法 这个API就使用来获取当前的电池状态 用法： 这是demo的URL：https://github.com/1921622004/webapi 文章来源，我这只做个个人的标记，挺有趣的 作者：awesome23 掘进上发现的有趣web api 标签：分享图片 style 有趣的 else webapi blank col 暂停 商业 原文地址：https://www.cnblogs.com/Dobin/p/10289202.html
用法
window.addEventListener(‘blur‘,() => {})
window.addEventListener(‘visibilitychange‘,() => {
// 通过这个方法来获取当前标签页在浏览器中的激活状态。
switch(document.visibilityState){
case‘prerender‘: // 网页预渲染 但内容不可见
case‘hidden‘: // 内容不可见 处于后台状态，最小化，或者锁屏状态
case‘visible‘: // 内容可见
case‘unloaded‘: // 文档被卸载
}
});
online state（网络状态）
用法：网络中断了，我们可以通过这个API去响应
window.addEventListener(‘online‘,onlineHandler)
window.addEventListener(‘offline‘,offlineHandler)
device orientation（陀螺仪）
window.addEventListener(‘deviceorientation‘,e => {
console.log(‘Gamma:‘,e.gamma);
console.log(‘Beta:‘,e.beta);
console.log(‘Alpha:‘,e.Alpha);
})
battery status
// 首先去判断当前浏览器是否支持此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(‘当前浏览器不支持~~~‘)
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。