内容介绍
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");
})
四、getBattery系统电量信息
getBattery提供系统电量信息，返回一个battery的promise对象，然后resolve得到BatteryManager对象
// getBattery提供系统电量信息，返回一个battery的promise对象，然后resolve得到BatteryManager对象
navigator.getBattery().then(function(battery) {
console.log(battery)
// 布尔值，当前是否正在充电
let charging = battery.charging,
// 数字，代表距离充电完毕还剩多少秒， 0 为充电完毕
chargingTime = battery.chargingTime,
// 数字， 代表距离电池耗空并挂起还需多少秒
dischargingTime = battery.dischargingTime,
// 代表电量，0.0-1.0
level = battery.level;
// 电池充电状态更新时调用
battery.addEventListener('chargingchange', function() {
alert(battery.charging ? '在充电' : '没在充电')
})
// 电池充电时间更新时触发
battery.addEventListener('chargingtimechange', function(info) {
console.log(info)
})
// 电池断开充电时间更新时触发
battery.addEventListener('dischargingtimechange', function(info) {
console.log(info)
})
// 电池电量更新时触发
battery.addEventListener('levelchange', function(info) {
console.log(info)
})
});
五、visibilitychange页面可见性
// 页面可见性：
document.addEventListener("visibilitychange", function() {
document.title = document.hidden ? "用户离开了" : "用户回来了";
});
六、toDataURL页面可见性
<canvas width="200" height="500"></canvas>
let canvas = document.querySelector('canvas');
let pen = canvas.getContext('2d');
pen.lineTo(100, 50);
pen.lineTo(150, 100);
pen.lineTo(100, 100);
pen.lineTo(100, 50);
pen.lineTo(100, 300);
pen.lineTo(80, 300);
pen.lineTo(50, 330);
pen.lineTo(150, 330);
pen.lineTo(120, 300);
pen.lineTo(100, 300);
pen.strokeStyle = 'red';
pen.stroke();
var img = document.createElement("img");
img.src = canvas.toDataURL("image/png");
// 输出base64
console.log(img.src);
纪念一下414，过几天就找不到自己了：
注：
部分浏览器不支持，注意兼容性
标签：javascript，navigator，振动，重力感应，联网状态
更多演示案例，查看 案例演示
欢迎评论留言!
转载：https://blog.csdn.net/cainiaoyihao_/article/details/115514234
查看评论