HTML5手机页面实现摇一摇功能（转）

由于工作需要，要求实现手机页面的摇一摇功能（非APP），通过搜索和提取案例中的源码，获取了如下代码：

<script>
if (window.DeviceMotionEvent) {
window.addEventListener(‘devicemotion’, deviceMotionHandler, false);
} else {
alert(“您的浏览器不支持运动传感事件”);
}

// 定义一个变量保存上次更新的时间
var last_update = 0;

// 紧接着定义x、y、z记录三个轴的数据以及上一次出发的时间
var x = 0;
var y = 0;
var z = 0;
var last_x = 0;
var last_y = 0;
var last_z = 0;

function deviceMotionHandler(eventData) {

// 获取含重力的加速度
var acceleration = eventData.accelerationIncludingGravity;

// 获取当前时间
var curTime = new Date().getTime();
var diffTime = curTime – last_update;

// 固定时间段
if (diffTime > 100) {
last_update = curTime;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
var speed = Math.abs(x + y + z – last_x – last_y – last_z) / diffTime * 10000;
if (speed > 2000) {
// TODO:在此处可以实现摇一摇之后所要进行的数据逻辑操作
alert(“摇一摇！”);
}
last_x = x;
last_y = y;
last_z = z;
}
}
</script>

代码解读：

1、DeviceMotionEvent（设备运动事件）返回设备有关于加速度和旋转的相关信息。加速度的数据将包含三个轴：x，y和z（示意如下图所 示，x轴横向贯穿手机屏幕或者笔记本键盘，y轴纵向贯穿手机屏幕或笔记本键盘，z轴垂直于手机屏幕或笔记本键盘）。因为有些设备可能没有硬件来排除重力的 影响，该事件会返回两个属性，accelerationIncludingGravity（含重力的加速度）和acceleration（加速度），后者 排除了重力的影响。

2、var acceleration = eventData.accelerationIncludingGravity;用于获取含重力的加速度，以便提取x、y、z轴的加速度分量。

3、为了有效感应动作并限制意外触发和连续触发，添加了diffTime 和speed双重限制。其中，var speed = Math.abs(x + y + z – last_x – last_y – last_z) / diffTime * 10000;算法可以感应三位空间中的有效动作。