- <!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
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.
真个代码的解析就是这样了。
可能我在某一块理解的不对,欢迎大家评论下 一起学习,研究。