百度开发者大会上推出的HTML5的另一个重要特性是DeviceOrientation，它在高层封装了底层的方向传感器和运动传感器，并提供了对DOM事件的支持。该功能包括两个事件：

DeviceOrientation:封装方向传感器数据的事件，可以获取静态下手机的方向数据，如手机的角度、方向、方位等。

DeviceMotion:封装运动传感器数据的事件，可以获取运动状态下手机的运动加速度等数据。

使用它，我们可以轻松实现重力感应、指南针等有趣的功能，在手机中会非常有用。比如Opera H5体验版中的重力感应球例子，就是通过听DeviceOrientationAPI的deviceOrientation事件实现的。

用HTML5实现手机震动功能

其实也可以帮助我们在网页上实现一个手机应用中非常常见和时尚的功能：抖手机。

刚开始在PhotoShake看到这个功能，后来很多大大小小的应用，包括微信，都加了这个功能。

用HTML5实现手机震动功能

如果你做过Android或者iOS开发，你可能很了解这个功能。但是接下来，我们将在Web上实现这个功能。

我们快点开始吧！

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

用HTML5实现手机震动功能

对于DeviceOrientation，有一篇关于HTML5Rocks的详细介绍文章《This End Up： Using Device Orientation》，很有参考价值。

我们先来听一下运动感应事件。

[javaclipt]if(窗口。device motion event){ window . addevent listener(' device motion '，deviceMotionHandler，false)；} [/javascript]

然后用重力得到加速度。

[javaclipt]FunctionDeviceMotionHandler(EventData){ var acceleration=EventData . accelerationincluding Gravity；} [/javascript]

下面我们来计算一下用户摇手机的原理。考虑的要点如下：

1.很多时候，用户向一个方向晃动手机进行晃动；

2.晃动时三个方向的加速度数据必须变化；

3.我们不能误判你手机的正常移动行为。想想吧。如果手机在裤兜里，走路的时候也会有加速度数据变化。

总之，我们应该计算三个方向的加速度，每隔一段时间测量它们，研究它们在固定时间内的变化率，并确定它触发动作的阈值。

我们需要定义几个变量来记录历史的X、Y、Z轴数据和最后的触发时间。核心方法实现代码如下：

varSHAKE _ THRESHOLD=xxxvar last _ update=0；varx，y，z，last_x，last_y，last _ z；functiondeviceMotionHandler(event data){ varacceleration=event data . accelerationincluding Gravity；varcurTime=newDate()。getTime()；if((Curtime-last update)100){ VarDiffTime=Curtime-last _ update；last _ update=curTimex=加速度. x；y=加速度. y；z=加速度. z；var speed=Math . ABS(x y z-last _ x-last _ y-last _ z)/DiffTime * 10000；if(Speedshake _ THreshold){ alert(' shaked！');} last _ x=xlast _ y=ylast _ z=z} }