1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 </head> 6 <body> 7 <div id="status"></div> 8 </body> 9 <script> 10 var shake=4000, 11 last_update=0, 12 count=0, 13 x=y=z=last_x=last_y=last_z=0; 14 if(window.DeviceMotionEvent){ 15 window.addEventListener("devicemotion",deviceMotionHandler,false); 16 }else{ 17 alert("本设备不支持devicemotion事件"); 18 } 19 console.log(new Date().valueOf()); 20 function deviceMotionHandler(eventData){ 21 var acceleration = eventData.accelerationIncludingGravity, 22 currTime=new Date().valueOf(), 23 diffTime=currTime-last_update; 24 25 if(diffTime>100){ 26 last_update=currTime; 27 x=acceleration.x; 28 y=acceleration.y; 29 z=acceleration.z; 30 var speed=Math.abs(x+y+z-last_x-last_y-last_z)/diffTime*10000 31 var status=document.getElementById("status"); 32 if(speed>shake){ 33 count++; 34 status.innerHTML = "你摇了中"+count+"次" ; 35 } 36 last_x = x; 37 last_y = y; 38 last_z = z; 39 } 40 } 41 </script> 42 </html>
devicemotion 获取设备加速度信息。其事件对象返回有3个值，但是我用到的是accelerationIncludingGravity 考虑了重力的影响。地球引力值是9.81 返回的X,Y,Z 其中的Z轴就是9.81 不过有正负之分 水平向上在安卓里面显示的是是+9.81 在苹果里面显示的是-9.81 （最然对于我们的计算没有影响，但是写出来让大家了解一下，免得测试的时候有疑问）。
注意:返回的X,Y,Z的属性值的单位是m/s^2
acceleration这个属性是没有考虑到重力影响的，很奇怪，我也在想为什么出两个标准。这个难道是考虑在真空吗。。。。
OK，来说说我们的代码。
设置了阀值4000（就是当加速度达到了这个值的时候，就触发了摇一摇的程序）。
获取上一次的时间last_update.
设置一个count来告诉大家你摇动了几次。
初始化各个轴的加速读，以及上一次的加速last_X,last_Y,last_Z.
如果设备支持DeviceMotionEvent就给window进行事件绑定。
获取当前时间currTime。
获取当前事件对象的accelerationIncludingGravity属性。
每100毫秒进行一次获取和判断加速度 X,Y,Z。
求的某一次的加速speed是否达到了阀值4000.
如果达到了就出发摇一摇事件。
最后再把这次的X,Y,Z的速度值复制给last_x,y,z.
整个代码的解析就是这样了。