<!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. DDos与CC攻击的简单个人理解

    DDos简单来说就是向指定IP发送大量无用的数据包,造成网卡堵塞. CC理解成模拟表单提交,真实模拟业务,但量大之后也会造成网络堵塞. 参考: http://www.enkj.com/idcnews/ ...

  2. Ubuntu下（Linux+Apache+MYSQL+PHP, LAMP）环境搭建

    近期開始玩PHP,于是试着搭建一下开发环境并做个记录,以备日后再使用起来方便可查. 第一步 确保软件包是最新的 sudo apt-get update 第二步 安装Apache2 sudo apt-g ...

  3. TCP Socket的一些行为

    几个重要的结论: 1. read总是在接收缓冲区有数据时立即返回,而不是等到给定的read buffer填满时返回. 只有当receive buffer为空时,blocking模式才会等待,而nonb ...

  4. hdu 4647 Another Graph Game,想到了就是水题了。。

    题目是给一个无向图,其中每个节点都有点权,边也有边权,然后就有2个小朋友开始做游戏了ALICE &BOB 游戏规定ALICE 先行动然后是BOB,然后依次轮流行动,行动时可以任意选取一个节点并 ...

  5. HTML中显示的文字自动换行

    在html中控制自动换行 http://www.cnblogs.com/zjxbetter/articles/1323449.html eg: <table> <tr> < ...

  6. C#程序集系列13,如何让CLR选择不同版本的程序集

    本篇主要体验,在存在多个版本程序集的情况下,如何让CLR选择哪个版本程序集运行,以及程序集版本的切换. 分别生成非强名称程序集不同版本 □ 生成某个版本的程序集 →清理F盘as文件夹,剩下如下文件 → ...

  7. jvm执行流程

    首先给一个简单的Java示例,源代码如下: public class Main { private static int size=1; public static void main(String  ...

  8. Selenium2+python自动化57-捕获异常（NoSuchElementException）

    前言 在定位元素的时候,经常会遇到各种异常,为什么会发生这些异常,遇到异常又该如何处理呢? 本篇通过学习selenium的exceptions模块,了解异常发生的原因. selenium+python ...

  9. interlliJ idea 不识别文件类型的解决方式

    idea 支持非常多种文件类型.然而总有想不到. 近期开发jenkins 插件,jenkins 插件的页面开发大多用jelly 如何让idea识别jelly呢? ctrl+alt+s 快捷键打开配置页 ...

  10. Oracle数据库中违反唯一约束的处理

    根据NULL的定义,NULL表示的是未知,因此两个NULL比较的结果既不相等,也不不等,结果仍然是未知.根据这个定义,多个NULL值的存在应该不违反唯一约束. 实际上Oracle也是如此实现的: SQ ...