<!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. 仿querySeletor 兼容IE 67

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. xapian的使用

    1.先来看一下Xapian的介绍: Xapian的官方网站是http://www.xapian.org,这是一个非常优秀的开源搜索引擎项目,搜索引擎其实只是一个通俗的说法,正式的说法其实是IR(Inf ...

  3. CHANGE USER WHEN I CONNECT TO TEAM FOUNDATION SERVER

    Question: I USE TEAM EXPLORER TO CONECT TO TEAM FOUNDATION SERVER 2010, BUT I DO NOT LOGIN OUT, AND ...

  4. 【MySQL案例】mysql-libs-5.1.73-3.el6_5.x86_64 conflicts with file from package Percona-Server-server

    假设遇到mysql-libs-5.1.73-3.el6_5.x86_64 conflicts with file from package Percona-Server-server报错,有两种情况导 ...

  5. spring Boot打可执行的jar包

    <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...

  6. php的初步了解

    刚刚学习PHP,在学校中没有接触过这个语言,但是身边的人都说php好,经过这几天的学习,我对它的基础有了一定的认知和了解,php是“PHP Hypertext Preprocessor”的首字母缩写, ...

  7. Android DiskLruCache 源代码解析 硬盘缓存的绝佳方案

    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/47251585: 本文出自:[张鸿洋的博客] 一.概述 依然是整理东西.所以最近 ...

  8. 可操纵网页URL地址的js插件-url.js

    url.js是一款能够很有用方便的操纵网页URL地址的js插件.通过url.js你能够设置和获取当前URL的參数,也能够对当前URL的參数进行更新.删除操作.还能够将当前URL的參数显示为json字符 ...

  9. Nginx zabbix 的监控

    Nginx zabbix 的监控 Nginx 配置 Nginx 必须包含:http_stub_status_module 模块 ./nginx -V |grep http_stub_status_mo ...

  10. Oracle—RMAN完全恢复

    一．RMAN完全恢复的相关概念 1.在RMAN完全恢复中主要使用两个命令,一个是restore,另一个是recover. 2.可以在三个级别恢复,数据库,表空间,数据文件. 3.RMAN中应对于各种情 ...