<!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. tomcat部署应用仅需ip和port访问

    一.使用ip和port访问应用项目: 打开tomcat安装根目录,打开conf目录下server.xml,找到<Host>节点,并且在该节点下新增: <Context   docBa ...

  2. 完整的POM文档内容

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  3. 微软正式发布VS2015和.Net为开发者提供数百个新功能

    今天,我很高兴地向大家宣布:Visual Studio 2015 和 .Net 4.6 的正式版本现已提供下载! 自去年十一月我们提出了微软开发技术的愿景:让所有开发者,无论他在什么平台,开发哪种应用 ...

  4. linux常用命令集锦

    linux 查看所有用户所在组   vi /etc/group 一个用户可以属于多个组,查看用户所属的组,groups + 用户名 linux 查找文件命令   find -name 文件名    在 ...

  5. 利用localStorage实现对ueditor编辑内容定时保存为草稿

    直接看代码吧 1.引入ueditor和ueditor的使用我就不细说了 详情请戳http://blog.csdn.net/wangdianyong/article/details/39780709 2 ...

  6. SAE java应用读写文件（TmpFS和Storage）

    近期不少java用户都在提sae读写本地文件的问题,在这里结合TmpFS和Storage服务说说java应用应该如何读写文件TmpFS是一个供应用临时读写的路径,但请求过后将被销毁.出于安全考虑,sa ...

  7. 混沌数学之CircuitChaotic(二维离散电路混沌系统)

    相关软件参见:混沌数学之离散点集图形DEMO 相关代码: // http://wenku.baidu.com/link?url=yg_gE7LUXCg2mXRp-ZZdfRXXIkcNj8YOhvN7 ...

  8. 数学图形(1.2)Sin曲线

    相关软件参见:数学图形可视化工具,使用自己定义语法的脚本代码生成数学图形.该软件免费开源.QQ交流群: 367752815 Sin曲线 vertices = x = *PI) to (*PI) y = ...

  9. C++中对Mysql的操作函数可以参考以下blog中的内容

    http://www.cnblogs.com/lovebread/archive/2009/11/24/1609936.html

  10. Informatica 常用组件Lookup之二 已连接和未连接的查找

    可以配置一个已连接的查找转换,以从映射管道中直接接收输入:您也可以配置一个未连接的查找转换,以从其它转换的表达式结果中接收输入. 已连接的查找 未连接的查找 直接从管道接收输入值. 从其它转换的 :L ...