JS 实现摇一摇

废话不多说，先上代码

if (window.DeviceMotionEvent) {
  window.addEventListener('devicemotion',deviceMotionHandler, false);
}else{
  console.log('不支持DeviceMotionEvent');
}
var speed = 20;//speed
var x = y = z = lastX = lastY = lastZ = 0;
function deviceMotionHandler(event) {
  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) {
//简单的摇一摇触发代码
console.log('摇一摇啊');
  }
  lastX = x;
  lastY = y;
  lastZ = z;
}

首先判断浏览器是否支持window.DeviceMotionEvent，
DeviceMotionEvent为web开发者提供了关于设备的位置和方向改变的速度的信息。
如果支持则监听devicemotion事件。如果设备在X,Y,Z轴方向上有位移，那么回调函数中的参数event对象中就会反应出来。

这里我们用到event对象中的accelerationIncludingGravity属性，它提供了设备在X,Y,Z轴方向上带重力的加速度的对象。
通过判断前后两次重力加速度差来判断手机是否被摇了。
Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed
只要x,y,z轴任意方向满足条件就判定被摇