<!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. Unity3D中的UnitySendMessage方法的使用

    UnitySendMessage(“string”,“string”, ***),这是方法,我们至少需要传入两个参数,第一个参数为unity中的一个gameobject名称,第二个参数为这个gameo ...

  2. POJ 2104 && POJ 2761 (静态区间第k大,主席树)

    查询区间第K大,而且没有修改. 使用划分树是可以做的. 作为主席树的入门题,感觉太神奇了,Orz /* *********************************************** ...

  3. Windows+VS2012环境下编译调试MySQL源码 转

    http://m.blog.csdn.net/blog/SnowyWolf/18952643

  4. javascript 实现页面加载完的操作

    document.onreadystatechange = function () { if (document.readyState == "complete") {//页面加载 ...

  5. 【微信小程序】处理时间格式,时间戳转化展示时间格式问题,调用外部js的默认方法function的问题

    默认的 小程序中new Date()显示的时间是这样的: 格式化时间的显示怎么做: 小程序的根目录下util目录下默认有一个util.js文件 其中util.js文件内容是: //数据转化 funct ...

  6. 《C++反汇编与逆向分析技术揭秘》之12——继承

    识别类和类之间的关系 在父类中声明为私有的成员,虽然子类对象无法直接访问,但是在子类对象的内存结构中,父类私有的成员数据依然存在. 在没有提供构造函数的时候,系统会尝试提供默认的构造函数: 当子类中没 ...

  7. 使用StringBuilder或StringBuffer简单优化

    使用StringBuilder或StringBuffer // join(["a", "b", "c"]) -> "a an ...

  8. CVPR 2015 papers

    CVPR2015 Papers震撼来袭! CVPR 2015的文章可以下载了,如果链接无法下载,可以在Google上通过搜索paper名字下载(友情提示:可以使用filetype:pdf命令). Go ...

  9. 第九章 LinkedBlockingQueue源码解析

    1.对于LinkedBlockingQueue需要掌握以下几点 创建 入队(添加元素) 出队(删除元素) 2.创建 Node节点内部类与LinkedBlockingQueue的一些属性 static ...

  10. ubuntu14.04开启root用户 设置root密码 配置国内镜像源 设置分辨率

    一.Ubuntu 默认是不允许 root 通过 ssh 直接登录的,可以修改 /etc/ssh/sshd_config,设置 1 PermitRootLogin yes 然后重启 ssh 服务即可 1 ...