H5实现的手机摇一摇
<!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实现的手机摇一摇的更多相关文章
- H5+JS实现手机摇一摇功能
在做微信活动页面的时候,经常会需要实现手机摇一摇功能,比如“摇一摇,拿好礼”. 为了实现它,就需要用到HTML5的DeviceOrientation特性.它提供的DeviceMotion事件封装了设备 ...
- h5手机摇一摇功能实现：基于html5重力感应DeviceMotionEvent事件监听手机摇晃
DeviceMotionEven是html5提供的一个用来获取设备物理方向及运动的信息(比如陀螺仪.罗盘及加速计)的Dom事件,事件描述如下: deviceorientation:提供设备的物理方向信 ...
- 用HTML5实现手机摇一摇的功能(转)
在百度开发者大会上我介绍过HTML5另外一个重要特性就是DeviceOrientation,它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持.这个特性包括两种事件: 1.devi ...
- 通过手机Web实现手机摇一摇的功能
经常我们玩微信都会用到查到附近的人,都是在app上实现手机摇一摇的功能.现在,我们将此技术搬移到手机web上,供大家学习,主要是用到HTML5的重要特性就是DeviceOrientation:官方文档 ...
- Adobe Edge Animate --使用HTML5实现手机摇一摇功能
Adobe Edge Animate --使用HTML5实现手机摇一摇功能 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. HTML5的发展日新月异,其功能 ...
- 用vue 写h5页面-摇一摇
vue配合其他ui框架除了开发一个完整的web项目外,也有不少的项目做一些h5的活动页面开发.你的页面现在需要模拟微信的摇一摇动作. 项目环境: vue-cli 完成的一个项目 准备插件(包):依赖的 ...
- H5实现摇一摇技术总结
摇一摇遇到的问题 一.如何对摇晃效果进行反馈 刚开始的处理方式是,摇晃过程中不做任何处理,但后来反馈说这种效果不好,好像就没有摇动一样,如果声音也不响的话,就真的和什么都没发生一样. 后来想了想,加入 ...
- iOS摇一摇手机，播放微信摇一摇音效
实现微信摇一摇播放音效,代码如下:- (void)motionBegan:(UIEventSubtype)motion withEvent:(UIEvent *)event{ if (motio ...
- H5摇一摇遇到的问题
一.如何对摇晃效果进行反馈 刚开始的处理方式是,摇晃过程中不做任何处理,但后来反馈说这种效果不好,好像就没有摇动一样,如果声音也不响的话,就真的和什么都没发生一样. 后来想了想,加入摇晃过程动画,就像 ...
随机推荐
- Node.js学习笔记(2) - Node.js安装及入门hello world
今天来简单的记录一下Node.js的安装配置以及简单的入门 一.Node.js的安装 1.windows下的安装 windows下的安装很简单,只需要去官网http://nodejs.org中,找到w ...
- Is Usb Drive () ? DeviceIoControl, IOCTL_STORAGE_QUERY_PROPERTY
http://banderlogi.blogspot.com/2011/06/enum-drive-letters-attached-for-usb.html typedef enum _STORAG ...
- hadoop函数说明图
- Windows 8 Metro 应用开发入门(一)：开发环境介绍
摘 要 Windows8已经发布,随之而来的基于WinRT的Metro应用也正向我们走来,正像它所宣传的:光滑.快.现代.看习惯了玻璃.立体风格的应用,或许Metro的简洁能给你留下不一样的体验.Vi ...
- 追MM和Java的23种设计模式
我在Java论坛看到这篇文章,作者以轻松的语言比喻了java的32种模式,有很好的启发作用,但可惜没有给出具体的意思,我就在后边加上了.这些都是最简单的介绍,要学习的话建议你看一下阎宏博士的<J ...
- 关于 json 单引号和双引号区别--请使用双引号
双引号才是json 的标准,单引号是不规范的(虽然在js 中是行的通的)! 由于某些原因,在将js json数据传到as 中处理的时候出现了“无效的json解析输入” ,于是查找了一下js参数是否有问 ...
- 跟我学AngularJs:AngularJs入门及第一个实例
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:主要给大家介绍了AngularJs及其特性,并以3个实例来做说明. 本教程使用Angul ...
- 混沌数学之CircuitChaotic(二维离散电路混沌系统)
相关软件参见:混沌数学之离散点集图形DEMO 相关代码: // http://wenku.baidu.com/link?url=yg_gE7LUXCg2mXRp-ZZdfRXXIkcNj8YOhvN7 ...
- ILMerge-GUI的使用
去这里下载: 这里下载ILMerge,http://www.microsoft.com/en-us/download/details.aspx?id=17630 这里下载ILMerge-GUI,htt ...
- Java 与 JavaScript 对websocket的使用
ebsocket,HTML5中新一代全双工通信协议.其底层仍然是http协议. 传统 HTTP 请求响应客户端服务器交互图 WebSocket 请求响应客户端服务器交互图 WebSocket 客户端支 ...