html调用手机陀螺仪,Js <获取手机陀螺仪>

仅在移动端才能查看效果

问题：

1.请确保在https环境下打开

2.ios手机需要用户手动获取权限后才能调用

DeviceOrientationEvent

name="viewport"

content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"

/>

// init vConsole

var vConsole = new VConsole();

console.log("Hello world");

同意授权

var SHAKE_THRESHOLD = 4000;

var last_update = 0;

var x,

y,

z,

last_x = 0,

last_y = 0,

last_z = 0;

if (window.DeviceMotionEvent) {

window.addEventListener("devicemotion", devicemotion, false);

}

//用户授权

function getPermission() {

if (

typeof DeviceMotionEvent !== "undefined" &&

typeof DeviceMotionEvent.requestPermission === "function"

) {

DeviceMotionEvent.requestPermission()

.then(function (state) {

if ("granted" === state) {

window.addEventListener("devicemotion", devicemotion, false);

} else {

alert("apply permission state: " + state);

}

})

.catch(function (err) {

alert("error: " + err);

});

}

}

function devicemotion(eventData) {

var acceleration = eventData.accelerationIncludingGravity;

var curTime = new Date().getTime();

if (curTime - last_update > 10) {

var diffTime = curTime - last_update;

last_update = curTime;

x = acceleration.x;

y = acceleration.y;

z = acceleration.z;

var speed =

(Math.abs(x + y + z - last_x - last_y - last_z) / diffTime) * 10000;

if (speed > SHAKE_THRESHOLD) {

alert("你中奖啦！"); // Do something

}

last_x = x;

last_y = y;

last_z = z;

document.getElementById("text").innerHTML =

"x:" + last_x + "y:" + last_y + "z:" + last_z;

}

}