h5手机摇一摇功能实现：基于html5重力感应DeviceMotionEvent事件监听手机摇晃

DeviceMotionEven是html5提供的一个用来获取设备物理方向及运动的信息(比如陀螺仪、罗盘及加速计)的Dom事件，事件描述如下：

deviceorientation：提供设备的物理方向信息，表示为一系列本地坐标系的旋角。
devicemotion：提供设备的加速信息，表示为定义在设备上的坐标系中的卡尔迪坐标。其还提供了设备在坐标系中的自转速率。若可行的话，事件应该提供设备重心处的加速信息。
compassneedscalibration：用于通知Web站点使用罗盘信息校准上述事件。

51220网站目录
https://www.51220.cn

原理：

开发者从各个内置传感器那里获取未经修改的传感数据，并观测或响应设备各种运动和角度变化。这些传感器包括陀螺仪、加速器和磁力仪(罗盘)。
加速器和陀螺仪的数据都是描述沿着iOS设备三个方向轴上的位置，对于一个竖屏摆放的iPhone来说，X方向从设备的左边(负)到右边(正)，Y方向则是由设备的底部(-)到顶部(+)，而Z方向为垂直于屏幕由设备的背面(-)到正面(+)。

DeviceMotionEvent 会在设备发生有意义的摆动(或运动)时产生.事件对象封装有产生的间距值,旋转率,和设备加速度，加速度的计算方式是重力和用户产生的两个加速度矢量之和.设备是通过 陀螺仪和加速计来区别这两者的，通过DeviceMotion对设备运动状态的判断，则可以帮助我们在网页上就实现“摇一摇”的交互效果。

利用devicemotion实现手机摇一摇

摇一摇的实现需借助html5新增的devicemotion事件，获取设备在位置和方向上的改变速度的相关信息。devicemotion事件对象中有一个accelerationIncludingGravity属性，该属性包括：一个包含x、y 和z 属性的对象，在考虑z轴自然重力加速度的情况下，告诉你在每个方向上的加速度。

 <script type="text/javascript">
     var currhandle=;//判断操作是否完成
     if(window.DeviceMotionEvent){
         var speed = ;
         var x = y = z = lastX = lastY = lastZ = ;
         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+) {
                 if(currhandle==){
                     setbegin();//摇一摇事件触发后执行操作
                     currhandle=;
                 }
             }
             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()*)%];
         currhandle=;
     }
 </script>