<!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. ThinkPHP空操作和空控制器的处理

    所谓的空操作和空控制器,简而言之就是系统中不存在该方法或控制器,导致系统报错(本文版本3.2.3). 正确URL(测试环境):  http://oa.com/index.php/admin/publi ...

  2. mysql-debug

    http://www1.huachu.com.cn/read/readbookinfo.asp?sectionid=1000002778 http://hedengcheng.com/?p=238 h ...

  3. xarmain使用Forms编译android工程出现support_r19.0.1.zip支持包错误

    第一次使用xarain下载Forms程序,提示一下错误. C:\Program Files (x86)\MSBuild\Xamarin\Android\Xamarin.Android.Common.t ...

  4. envi几何校正

    转载自原文 介绍地理参考数据的知识以及ENVI 中图像对图像.图像对地图两种校正方法 1．打开基图像XX.img和待纠正的图像YY.img(不带地理信息,可以双击其主图像窗口可以在Cursor Loc ...

  5. arcgis10.5新功能图形缓冲

    摘要 在输入要素周围某一指定距离内创建缓冲区多边形.在要素周围生成缓冲区时,大部分制图形状对缓冲区末端(端头)和拐角(连接)可用. 插图  

  6. Ext Form

    表单Ext.form.FormPanel 1.表单 对于传统的b/s应用来说,数据录入元素是放在表单<form>标签里面的.而对于ExtJS应用来说,则可以直接使用FormPanel控件来 ...

  7. 【centOS7】centOS7上普通用户切换root用户，相互切换

    当前普通用户登录,想要切换为root用户,需要输入命令 su 需要输入root密码.输入时候屏幕不会显示,直接输入完了,回车即可 回车后,即切换到root用户下 想要从root用户切换到普通用户,只需 ...

  8. Oracle 快速插入1000万条数据的实现方式

    1.使用dual配合connect by level create table BigTable as select rownum as id from dual connect by level & ...

  9. Oracle数据库--解决单张表中数据量巨大(大数据、数据量上百万级别，后查询，更新数据等耗时剧增)

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/QQ578473688/article/details/54561397 思路1:采用备份表 备份表中 ...

  10. window消息机制二

    消息机制 windows是一个消息驱动的系统,会有一个总的系统消息的队列,鼠标.键盘等等都会流入到这个队列中,同时会为每个线程维护一个消息队列(注意默认是有GUI调用的线程才有,对于没有GUI或者窗口 ...