幾種不常用Web API（振動、重力感應、聯網狀態）
- 內容介紹
- 一、vibrate振動
- 1、判斷設備是否支持振動
- 2、單次震動
- 3、間接振動
- 4、停止振動
- 5、持續振動
- 二、deviceorientation重力感應
- 三、online瀏覽器聯網狀態
- 1、獲取當前聯網狀態
- 2、監聽聯網變化狀態
內容介紹
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，振動，重力感應，聯網狀態
更多演示案例，查看 案例演示
歡迎評論留言!
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/275015.html
標籤：其他