<!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.

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

 

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

  1. H5+JS实现手机摇一摇功能

    在做微信活动页面的时候,经常会需要实现手机摇一摇功能,比如“摇一摇,拿好礼”. 为了实现它,就需要用到HTML5的DeviceOrientation特性.它提供的DeviceMotion事件封装了设备 ...

  2. h5手机摇一摇功能实现：基于html5重力感应DeviceMotionEvent事件监听手机摇晃

    DeviceMotionEven是html5提供的一个用来获取设备物理方向及运动的信息(比如陀螺仪.罗盘及加速计)的Dom事件,事件描述如下: deviceorientation:提供设备的物理方向信 ...

  3. 用HTML5实现手机摇一摇的功能(转)

    在百度开发者大会上我介绍过HTML5另外一个重要特性就是DeviceOrientation,它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持.这个特性包括两种事件: 1.devi ...

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

    经常我们玩微信都会用到查到附近的人,都是在app上实现手机摇一摇的功能.现在,我们将此技术搬移到手机web上,供大家学习,主要是用到HTML5的重要特性就是DeviceOrientation:官方文档 ...

  5. Adobe Edge Animate --使用HTML5实现手机摇一摇功能

    Adobe Edge Animate --使用HTML5实现手机摇一摇功能 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. HTML5的发展日新月异,其功能 ...

  6. 用vue 写h5页面-摇一摇

    vue配合其他ui框架除了开发一个完整的web项目外,也有不少的项目做一些h5的活动页面开发.你的页面现在需要模拟微信的摇一摇动作. 项目环境: vue-cli 完成的一个项目 准备插件(包):依赖的 ...

  7. H5实现摇一摇技术总结

    摇一摇遇到的问题 一.如何对摇晃效果进行反馈 刚开始的处理方式是,摇晃过程中不做任何处理,但后来反馈说这种效果不好,好像就没有摇动一样,如果声音也不响的话,就真的和什么都没发生一样. 后来想了想,加入 ...

  8. iOS摇一摇手机，播放微信摇一摇音效

    实现微信摇一摇播放音效,代码如下:- (void)motionBegan:(UIEventSubtype)motion withEvent:(UIEvent *)event{    if (motio ...

  9. H5摇一摇遇到的问题

    一.如何对摇晃效果进行反馈 刚开始的处理方式是,摇晃过程中不做任何处理,但后来反馈说这种效果不好,好像就没有摇动一样,如果声音也不响的话,就真的和什么都没发生一样. 后来想了想,加入摇晃过程动画,就像 ...

随机推荐

  1. 【Eclipse提高开发速度-插件篇】安装多语言Propertys编辑工具

    安装的的时候能够通过 Help>Eclipse Marketplace的 搜索方式安装 或者 Help>Install New Software Name:Propertys URL:ht ...

  2. systemtap 探针定制

    http://blog.163.com/digoal@126/blog/static/163877040201391123645546/

  3. 1. python 字符串简介与常用函数

    1. python中的字符串简介与常用函数 在python中,字符串变成了一个强大的处理工具集,他是不可变的,也就是说字符串包含字符与字符的顺序,他不可以原处修改 字符串是我们后面需要学习的稍大一点的 ...

  4. eclipse 启动不起来（不能创建VM）

    Specifying the Java virtual machine Here is a typical Eclipse command line: eclipse -vm c:\jdk1.4.2\ ...

  5. pytest文档17-fixture之autouse=True

    前言 平常写自动化用例会写一些前置的fixture操作,用例需要用到就直接传该函数的参数名称就行了.当用例很多的时候,每次都传这个参数,会比较麻烦. fixture里面有个参数autouse,默认是F ...

  6. jsp中简易版本的图片上传程序

    1.下载相应的组件的最新版本 Commons FileUpload 可以在http://jakarta.apache.org/commons/fileupload/下载 附加的Commons IO   ...

  7. struts2 select标签

    headerValue : 默认值value headerKey : 默认name list : 源数据 (可以在action方法里从数据库获取list) name : 被选数据存放的位置(这里我方在 ...

  8. JDBC进阶之PreparedStatement执行SQL语句(MySQL)

    一.什么是PreparedStatement           参阅Java API文档,我们可以知道,PreparedStatement是Statement的子接口(如图所示),表示预编译的 SQ ...

  9. strcat实现

    //将源字符串加const,表明其为输入参数 char*strcat(char*strDest,constchar*strSrc) { //后文returnaddress,故不能放在assert断言之 ...

  10. PASCAL VOC数据集The PASCAL Object Recognition Database Collection

    The PASCAL Object Recognition Database Collection News 04-Apr-07: The VOC2007 challenge development ...