几种不常用Web API(振动、重力感应、联网状态)
内容介绍
navigator对象中有一些不常用的API,以下主要介绍vibrate振动,deviceorientation重力感应和online联网状态。
一、vibrate振动
1、判断设备是否支持振动
// 判断设备是否支持振动(部分浏览器不支持)——vibrate
var vibrateStatus = window.navigator.vibrate();
2、单次震动
// 单次震动200ms
window.navigator.vibrate(200);
window.navigator.vibrate([200]);
3、间接振动
// 间接振动(振动100ms,暂停200ms,继续振动300ms,暂停400ms...,奇数振动,偶数暂停)
window.navigator.vibrate([100, 200, 300, 400]);
4、停止振动
// 停止振动(空白,[0]或数组全部为0)
window.navigator.vibrate();
window.navigator.vibrate([0]);
window.navigator.vibrate([0, 0, 0]);
5、持续振动
// 持续振动(使用setInterval和clearInterval控制开始和停止)
var vibrateInterval;
function startVibrate(duration) {
navigator.vibrate(duration);
}
function stopVibrate() {
if (vibrateInterval) clearInterval(vibrateInterval);
navigator.vibrate(0);
}
function startPeristentVibrate(duration, interval) {
vibrateInterval = setInterval(function() {
startVibrate(duration);
}, interval);
}
二、deviceorientation重力感应
// 重力感应方向输出——deviceorientation
if (window.DeviceOrientationEvent) {
window.addEventListener("deviceorientation", function(event) {
// alpha: 在Z轴上的角度
var rotateDegrees = event.alpha;
// gamma: 从左到右
var leftToRight = event.gamma;
// beta: 从前到后的运动
var frontToBack = event.beta;
handleOrientationEvent(frontToBack, leftToRight, rotateDegrees);
}, true);
}
var handleOrientationEvent = function(frontToBack, leftToRight, rotateDegrees) {
// TODO
};
三、online浏览器联网状态
1、获取当前联网状态
// 获取当前联网状态
if (navigator.onLine) {
alert('online')
} else {
alert('offline');
}
2、监听联网变化状态
// 监听联网变化状态
window.addEventListener("offline", function(e) {
alert("offline");
})
window.addEventListener("online", function(e) {
alert("online");
})
注:
??部分浏览器不支持,注意兼容性
标签:javascript,navigator,振动,重力感应,联网状态
更多演示案例,查看 案例演示
欢迎评论留言!