手机摇一摇事件
DeviceMotionEvent 简 介
html 5 提供了几个新的 DOM 事件来获得设备物理(主要针对移动端)方向及运动的信息，包括：陀螺仪、罗盘及加速计。
1）deviceorientation (设备方向/定位)：提供设备的物理方向信息，表示为一系列本地坐标系的旋角。
2）devicemotion (设备运动/手势)：提供设备的加速度信息，表示为定义在设备上的坐标系中的笛卡尔坐标，其还提供了设备在坐标系中的自转速率。
3）compassneedscalibration (罗盘校准)：用于通知 Web 站点使用罗盘信息校准上述事件。
开发者从各个内置传感器那里获取未经修改的传感数据，并观测或响应设备各种运动和角度变化，这些传感器包括陀螺仪、加速器和磁力仪(罗盘)。
加速器和陀螺仪的数据都是描述沿着设备三个方向轴上的位置，对于一个竖屏摆放的设备来说，X 方向从设备的左边(负)到右边(正)，Y 方向则是由设备的底部(-)到顶部(+)，而 Z 方向为垂直于屏幕由设备的背面(-)到正面(+)。
DeviceMotionEvent 会在设备发生有意义的摆动(或运动)时产生，事件对象封装有产生的间距值，旋转率，和设备加速度。
加速度的计算方式是重力和用户产生的两个加速度矢量之和，设备是通过 陀螺仪和加速计来区别这两者的，通过DeviceMotion 对设备运动状态的判断，则可以在网页上就实现“摇一摇”的交互效果。
devicemotion 设备运动
devicemotion：监听手机加速度变化的事件（比如 手机疯狂摇摆）
有 4 个只读属性：
（1）accelerationIncludingGravity：重力加速度（包括重心引力9.8）
（2）acceleration：加速度（需要设备陀螺仪支持）
（3）rotationRate（alpha，beat，gamma）；旋转速度
（4）interval：获取的时间间隔
注册一个devicemotion时间的接收器：
window.addEventListener("devicemotion", function(event) {
// 处理event.acceleration、event.accelerationIncludingGravity、
// event.rotationRate和event.interval
}, true);
摇一摇改变背景色
下面直接以一个例子进行说明，手机摇一摇来改变页面背景颜色。
<!doctype html> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width,initial-scale=1.0"/> <title>HTML5 手机摇一摇</title> <!-- JQuery CDN --> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script type="text/javascript"> /** * 颜色数组 * @type {Array} */ var colorArray = new Array('#fff', '#ff0', '#f0f', '#0ff', '#f00', '#0f0', '#00f', "#000"); /**window.DeviceMotionEvent：判斷浏览器是否支持此时间*/ if (window.DeviceMotionEvent) { /** * speed：速度，根据摇一摇的动作幅度可以适当增加或减小 * cx、cy、cz：分别是当前在 x,y,z 3个方向上的加速度 * lastX、lastY、lastZ：分别是上一次在 x,y,z 3个方向上的加速度 */ var speed = 20; var cx = cy = cz = lastX = lastY = lastZ = 0; /**注册devicemotion(设备运动)事件 * Window.prototype.addEventListener = function(type,listener,useCapture) * type：事件类型，如 devicemotion、deviceorientation、compassneedscalibration 等 * listener：事件触发的回调函数，也可以提取出来单独写 * useCapture：是否捕获 * */ window.addEventListener('devicemotion', function (evenData) { /**获取重力加速度 * x、y、z 三个属性，分别表示 3 个方向上的重力加速度 * */ var acceleration = evenData.accelerationIncludingGravity; cx = acceleration.x; cy = acceleration.y; cz = acceleration.z; /**只要手机有稍微的抖动，就会进入此回调函数 * 当某一个方向上的加速度超过 speed 的值时，改变背景色 */ if (Math.abs(cx - lastX) > speed || Math.abs(cy - lastY) > speed || Math.abs(cz - lastZ) > speed) { document.body.style.backgroundColor = colorArray[Math.round(Math.random() * 10) % 8]; /** 将数据打印出来瞧一瞧*/ $("#x").append("cx:" + cx + "\r\n"); $("#y").append("cy:" + cy + "\r\n"); $("#z").append("cz:" + cz + "\r\n"); } lastX = cx; lastY = cy; lastZ = cz; }, true); } else { alert('您的浏览器不支持摇一摇功能.'); } </script> </head> <body> 手机摇一摇，改变手机屏幕颜色。 <p>x 方向</p> <p id="x"></p> <p>y 方向</p> <p id="y"></p> <p>z 方向</p> <p id="z"></p> </body> </html>
