在百度搜索开发设计者交流会上我详细介绍过HTML5此外1个关键特点便是DeviceOrientation，它将最底层的方位感应器和健身运动感应器开展了高級封裝，出示了DOM恶性事件的适用。这个特点包含两种恶性事件：
1、 deviceOrientation：封裝了方位感应器数据信息的恶性事件，能够获得手机上静止不动情况下的方位数据信息，比如手机上所处角度、方向、房屋朝向等。
2、 deviceMotion：封裝了健身运动感应器数据信息的恶性事件，能够获得手机上健身运动情况下的健身运动加快度等数据信息。
应用它大家可以很非常容易的完成重力感应、指南针等趣味的作用，在手机上上把十分有效。比如Opera H5体验版里的重力感应球示例便是根据监视DeviceOrientation API的deviceOrientation恶性事件来完成的。
用HTML5完成手机上摇1摇的作用
实际上它还能协助大家在网页页面上完成1个手机上运用里十分普遍而时尚潮流的作用：手机上摇1摇。
我最初见到这个作用实际上是在PhotoShake里，后来包含手机微信在内的许很多多、大尺寸小的运用都添加了这个作用。
用HTML5完成手机上摇1摇的作用
假如你以前做过Android或iOS开发设计，针对这样的作用将会十分掌握。可是下面，大家将在Web上初次完成这个作用。
让大家赶紧刚开始吧！
DeviceMotionEvent（机器设备健身运动恶性事件）回到机器设备相关于加快度和转动的有关信息内容。加快度的数据信息将包括3个轴：x，y和z（示意以下图所 示，x轴横向贯穿手机上显示屏或笔记本电脑键盘，y轴纵向贯穿手机上显示屏或笔记本电脑键盘，z轴竖直于手机上显示屏或笔记本电脑键盘）。由于一些机器设备将会沒有硬件配置来清除重力的 危害，该恶性事件会回到两个特性，accelerationIncludingGravity（含重力的加快度）和acceleration（加快度），后者 清除了重力的危害。
用HTML5完成手机上摇1摇的作用
大家先来监视健身运动传感恶性事件。
[javacript]
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion',deviceMotionHandler, false);
}
[/javascript]
随后获得含重力的加快度。
[javacript]
function deviceMotionHandler(eventData) {
var acceleration =eventData.accelerationIncludingGravity;
}
[/javascript]</p>
<p>
下面就涉及到到大家怎样测算客户晃动手机上的基本原理了。
考虑到的关键点以下：1、 客户大多数情况下全是以1个方位为主摇晃手机上来开展摇晃；
2、 在摇晃时3个方位的加快度数据信息必然都会转变；
3、 大家不可以误判手机上一切正常的健身运动个人行为，想想，假如你的手机上放在裤兜里，走路时它也会有加快度数据信息转变。
综上，大家应当对于3个方位的加快度开展测算，间距精确测量它们，调查它们在固定不动時间段里的转变率，并且必须为它明确1个阀值来开启姿势。
大家必须界定几个自变量来纪录历史时间x、y、z轴的数据信息和上1次开启的時间。关键方式完成编码以下：
var SHAKE_THRESHOLD = xxx;
var last_update = 0;
var x, y, z, last_x, last_y, last_z;
function deviceMotionHandler(eventData) {
var acceleration =eventData.accelerationIncludingGravity;
var curTime = newDate().getTime();
if ((curTime - lastUpdate)> 100) {
var diffTime = curTime -last_update;
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 > SHAKE_THRESHOLD) {
alert("shaked!");
}
last_x = x;
last_y = y;
last_z = z;
}
}
由此大家进行了手机上摇1摇的作用，是否十分简易？
