DeviceMotionEven是html5提供的一个用来获取设备物理方向及运动的信息(比如陀螺仪、罗盘及加速计)的Dom事件,利用devicemotion实现手机h5页面摇一摇功能
DeviceMotionEvent事件:
deviceorientation:提供设备的物理方向信息,表示为一系列本地坐标系的旋角。
devicemotion:提供设备的加速信息,表示为定义在设备上的坐标系中的卡尔迪坐标。其还提供了设备在坐标系中的自转速率。若可行的话,事件应该提供设备重心处的加速信息。
compassneedscalibration:用于通知Web站点使用罗盘信息校准上述事件。
原理:
利用devicemotion实现手机摇一摇
<script type="text/javascript">
var currhandle=0;//判断操作是否完成
if(window.DeviceMotionEvent){
var speed = 15;
var x = y = z = lastX = lastY = lastZ = 0;
window.addEventListener('devicemotion', function(){
var acceleration =event.accelerationIncludingGravity;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed+10) {
if(currhandle==0){
setbegin();//摇一摇事件触发后执行操作
currhandle=1;
}
}
lastX = x;
lastY = y;
lastZ = z;
}, false);
}else{
console.log("您的设备不支持重力感应事件!")
}
function setbegin(){//开始操作
var color = new Array('#ff9', '#ff0', '#f00', '#000', '#00f', '#0ff');
document.body.style.backgroundColor = color[Math.round(Math.random()*10)%6];
currhandle=0;
}
</script>