H5实现的手机摇一摇 

 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.

整个代码的解析就是这样了。

 
posted @ 2016-06-02 16:25  魔流剑  阅读(2472)  评论(1)  编辑  收藏  举报