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

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.

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

时间: 2024-10-13 16:17:31

H5实现的手机摇一摇的相关文章

关于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=

通过手机Web实现手机摇一摇的功能

经常我们玩微信都会用到查到附近的人,都是在app上实现手机摇一摇的功能.现在,我们将此技术搬移到手机web上,供大家学习,主要是用到HTML5的重要特性就是DeviceOrientation:官方文档 它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持.这个特性包括两种事件: deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方位.朝向等. deviceMotion:封装了运动传感器数据的事件,可以获取手机运动

Android手机摇一摇之传感器开发

[声明]转载请注明出处,此文出自指尖飞落的博客:http://blog.csdn.net/huntersnail --尊重作者,知识无价,交流无限! 一.手机摇晃计算 1.手机摇晃的动作 2.一个点三个轴X.Y.Z ①计算从a--b的增量:a点到b点各个轴相减之和 假设a(x1,y1,z1).b(x2,y2,z2) 增量ab=(x2-x1)+(y2-y1)+(z2-z1) ②将所有的增量进行汇总,得到一个大的增量,假设是N.并进行判断: 如果N>=设定的域值M,则确定在摇晃手机. 说明:N=ab

HTML 5实现的手机摇一摇

自从HTML 5的DeviceOrientation被开发出来,很多开发者开始研究其特性,并对此开发出了摇一摇,计步器等应用.小编近日闲着无聊,也开发出了一个摇一摇网页应用,感兴趣的小伙伴可亲身体验一下. 扫码访问 效果图 技术解析 (1) DeviceOrientation DeviceOrientation是HTML 5的重要特性之一,它将底层的方向传感器和运动传感器进行了高级封装,提供了对DOM两种事件的支持: 1. deviceOrientation:它封装了方向传感器的数据事件,可以获

手机摇一摇功能音量大小跟系统音量一致

源码免费下载 布局文文件:main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent&qu

HTML5手机重力与方向感应的应用——摇一摇效果

http://www.helloweba.com/view-blog-287.html HTML5有一个重要特性:DeviceOrientation,它将底层的方向和运动传感器进行了高级封装,它使我们能够很容易的实现重力感应.指南针等有趣的功能.本文将结合实例给大家介绍使用HTML5的重力运动和方向传感器实现手机摇一摇效果. DeviceOrientation包括两个事件: 1.deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方

利用html5实现类似微信的手机摇一摇功能

利用html5实现类似微信的手机摇一摇功能,并播放音乐. 1.  deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方位.朝向等. 2.  deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据. 不多说直接上代码, Javascript: [javascript] view plaincopy var SHAKE_THRESHOLD = 3000; var last_update = 0;

iOS摇一摇手机,播放微信摇一摇音效

实现微信摇一摇播放音效,代码如下:- (void)motionBegan:(UIEventSubtype)motion withEvent:(UIEvent *)event{    if (motion == UIEventSubtypeMotionShake) {         NSLog(@"摇一摇,哈哈哈");         [self playSoundEffect:@"yaoyiyao"];    }}-(void)playSoundEffect:(N

HTML5实现手机摇一摇的功能

利用html5实现类似微信的手机摇一摇功能,并播放音乐. 1.  deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方位.朝向等. 2.  deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据. js如下: <scirpt> var SHAKE_THRESHOLD = 3000; var last_update = 0; var x = y = z = last_x = last_y =