H5实现的手机摇一摇

Posted 2020-06-08

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了H5实现的手机摇一摇相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="utf-8">  
    </head>  
    <body>  
        <div id="status"></div>     
    </body>  
    <script>  
       var shake=4000,   
           last_update=0,   
           count=0,  
           x=y=z=last_x=last_y=last_z=0;  
       if(window.DeviceMotionEvent){  
            window.addEventListener("devicemotion",deviceMotionHandler,false);  
       }else{  
         alert("本设备不支持devicemotion事件");  
       }  
       console.log(new Date().valueOf());  
       function deviceMotionHandler(eventData){  
            var acceleration = eventData.accelerationIncludingGravity,  
                currTime=new Date().valueOf(),  
                diffTime=currTime-last_update;  
   
                if(diffTime>100){  
                   last_update=currTime;  
                   x=acceleration.x;  
                   y=acceleration.y;  
                   z=acceleration.z;  
                   var speed=Math.abs(x+y+z-last_x-last_y-last_z)/diffTime*10000  
                   var status=document.getElementById("status");  
                   if(speed>shake){  
                         count++;  
                         status.innerHTML = "你摇了中"+count+"次" ;  
                   }  
                   last_x = x;  
                   last_y = y;  
                   last_z = z;  
                }  
       }  
    </script>  
</html>

devicemotion 获取设备加速度信息。其事件对象返回有3个值，但是我用到的是accelerationIncludingGravity 考虑了重力的影响。地球引力值是9.81 返回的X,Y,Z 其中的Z轴就是9.81 不过有正负之分水平向上在安卓里面显示的是是+9.81 在苹果里面显示的是-9.81 （最然对于我们的计算没有影响，但是写出来让大家了解一下，免得测试的时候有疑问）。

注意:返回的X,Y,Z的属性值的单位是m/s^2