html5传感器(注意苹果和安卓方向是相反的 回调函数触发的速度苹果要快很多 设置坐标不要设置在回调函数里)
以下是代码
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Cache-Control" content="no-cache" />
<title>Title</title>

</head>
<body>
x:<div style="font-size: 55px;" id="x">x</div>
y:<div style="font-size: 55px;" id="y">y</div>
z:<div style="font-size: 55px;" id="z">z</div>
speed:<div style="font-size: 55px;" id="speed">speed</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
$(function () {

var shakeThreshold = 1000; // 定义一个摇动的阈值
var lastUpdate = 0; // 记录上一次摇动的时间
var x, y, z, lastX, lastY, lastZ; // 定义x、y、z记录三个轴的数据以及上一次触发的数据

// 监听传感器运动事件
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
alert('本设备不支持devicemotion事件');
}

// 运动传感器处理
function deviceMotionHandler(eventData) {
var acceleration = eventData.accelerationIncludingGravity; // 获取含重力的加速度
$('#x').text(acceleration.x);
$('#y').text(acceleration.y);
$('#z').text(acceleration.z);
var curTime = new Date().getTime();

// 100毫秒进行一次位置判断
if ((curTime - lastUpdate) > 100) {

var diffTime = curTime - lastUpdate;
lastUpdate = curTime;

x = acceleration.x;
y = acceleration.y;
z = acceleration.z;

var speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 10000;
$('#speed').text(speed);
// 前后x, y, z间的差值的绝对值和时间比率超过了预设的阈值，则判断设备进行了摇晃操作
if (speed > shakeThreshold) {
alert('摇动了');
}

lastX = x;
lastY = y;
lastZ = z;
}
}
})

</script>
</body>
</html>
</pre>
测试网址 可以观察x y z变化 http://newmiracle.cn/yaobai.html
ps 变化都是-10到10的变化 只要看整数就行 小数点不断的变化不用去鸟他

html5传感器的更多相关文章

  1. 设备加速传感器(accelerometer) ---- HTML5+

    模块:Accelerometer Accelerometer模块管理设备加速度传感器,用于获取设备加速度信息,包括x(屏幕水平方向).y(垂直屏幕水平方向).z(垂直屏幕平面方向)三个方向的加速度信息 ...

  2. HTML5调用传感器的资料汇总

    都可以调用:devicetemperature(温度).devicepressure(压力).devicehumidity(湿度).devicelight(光).devicenoise(声音).dev ...

  3. 使用HTML5开发Kinect体感游戏

    一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...

  4. html5快速入门（一）—— html简介

    前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...

  5. 移动端HTML5资源整理

    目录 meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 忽略将页面中的数字识别为电话号码 忽略Android平台中对邮箱地址的识别 当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅 ...

  6. html5 摇一摇事件监听

    先来看下html5的这几个特性: 1.deviceOrientation:方向传感器数据的事件,通过监听该事件可以获取手机静态状态下的方向数据: 2.deviceMotion: 运动传感器数据事件,通 ...

  7. HTML5新特性之移动设备API

    为了更好地为移动设备服务,HTML5推出了一系列针对移动设备的API. 1.Geolocation API Geolocation接口用于获取用户的地理位置.它使用的方法基于GPS或者其他机制(比如I ...

  8. 无插件纯Web HTML5 3D机房 终结篇（新增资产管理、动环监控等内容）

    原本以为这次的机房资产管理项目告一段落,可以歇一歇,哥还是太天真了.我们伟大的甲方又拿下了第二期的项目,誓把哥的才华发挥到极致啊.国庆长假也没正经休息几天,硬是给人折腾出了个demo,加上了容量管理. ...

  9. html5实现微信摇一摇功能

    在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...

随机推荐

  1. 关于defer.promise.then 异步的一个疑问 | 用柯里化做promise | 用递归做promise

    疑问:感觉会报错,因为执行到defer.promise.then这时候还没到defer.resolve,因为异步读文件,总归会慢 解答:先执行defer.promise.then,是给callback ...

  2. HTTP1.0、HTTP1.1、HTTP2.0的关系和区别

    一.汇总对比 HTTP1.0 无状态.无连接HTTP1.1 持久连接请求管道化增加缓存处理(新的字段如cache-control)增加Host字段.支持断点传输等(把文件分成几部分)HTTP2.0 二 ...

  3. UFUN函数 UF_CSYS函数 UF_MTX函数（如何创建坐标系）；

    // (题目不够长,写在这了) // 函数有 // UF_MTX3_initialize,UF_CSYS_create_matrix,UF_CSYS_create_csys,UF_CSYS_ask_c ...

  4. 关于finalize()

    finalize()是Object中的方法,当垃圾回收器将要回收对象所占内存之前被调用,即当一个对象被虚拟机宣告死亡时会先调用它finalize()方法,让此对象处理它生前的最后事情(这个对象可以趁这 ...

  5. Eclipse4.9集成Tomcat 9.0.21详细版

    1.下载Tomcat 从Tomcat官网下载:https://tomcat.apache.org 此处我下载的版本是Tomcat 7.0.94 下载完毕后解压即可,我解压后的路径是D:\soft\ap ...

  6. sql脱库的几种方法

    当发现sql注入之后,脱库的方法,有以下几种:   (1)当目标主机支持外部连接时,使用Navicat 进行连接!当时目标主机不同,使用的Navicat种类不一样: mysql : Navicat f ...

  7. 【Beta】Scrum Meeting 10 & 发布链接

    目录 前言 任务分配 燃尽图 会议照片 签入记录 发布链接(5.17更新) 前言 第10次会议于5月15日22:00在一公寓三楼召开. 交流确认了各自的任务进度,确定了Beta阶段发布的相关事宜.时长 ...

  8. 【面向对象】第三单元总结——JML

    梳理JML语言的理论基础.应用工具链情况 JML语言理论基础 JML(Java Modeling Language)是一种行为规范接口语言,通过使用不会被编译的注释形式,和固定关键字的语法,指定Jav ...

  9. supervisor更改某项目配置后 需要重新启动才有效

    在linux服务器上部署了node项目,使用supervisor进行管理,supervisor是个好工具,具体介绍见这里about supervisor 梗概了该项目对的某些配置后,重新启动项目,发现 ...

  10. javascript正则提取字母和数字小数

    var item = {name:"PM2.5"}; item.nameFirst = item.name.replace(/[^a-zA-Z]/g, ''); item.name ...