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轴自然重力加速度的情况下，告诉你在每个方向上的加速度。
1 <script type="text/javascript"> 2 var currhandle=0;//判断操作是否完成 3 if(window.DeviceMotionEvent){ 4 var speed = 15; 5 var x = y = z = lastX = lastY = lastZ = 0; 6 window.addEventListener('devicemotion', function(){ 7 var acceleration =event.accelerationIncludingGravity; 8 x = acceleration.x; 9 y = acceleration.y; 10 z = acceleration.z; 11 if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed+10) { 12 if(currhandle==0){ 13 setbegin();//摇一摇事件触发后执行操作 14 currhandle=1; 15 } 16 } 17 lastX = x; 18 lastY = y; 19 lastZ = z; 20 }, false); 21 }else{ 22 console.log("您的设备不支持重力感应事件！") 23 } 24 function setbegin(){//开始操作 25 var color = new Array('#ff9', '#ff0', '#f00', '#000', '#00f', '#0ff'); 26 document.body.style.backgroundColor = color[Math.round(Math.random()*10)%6]; 27 currhandle=0; 28 } 29 </script>
原文链接：https://www.cnblogs.com/ypppt/p/13055153.html
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/18720
