HTML5 实现手机摇一摇

　　HTML5新增了一些JavaScript API接口，比如地理定位、重力感应等。今天主要介绍devicemotion事件（设备事件），它提供设备的加速信息，表示为定义在设备上的坐标系。其还提供了设备在坐标系中的自转速率。若可行的话，事件应该提供设备重心处的加速信息。本文给大家讲解了HTML5实现手机摇一摇的效果。

手机摇一摇的实现思路：

1、检测设备是否支持重力传感；

 1 // 监听运动传感事件，查看是否支持硬件运动
 2
 3 if (window.DeviceMotionEvent) {
 4
 5 alert("您的设备支持硬件调用");
 6
 7 } else {
 8
 9 alert("您的设备不支持硬件调用");
10
11 }

2、绑定运动传感（devimotion）事件；

1 window.addEventListener(‘devicemotion‘, deviceMotionHandler, false);

3、根据devimotion事件对象，获取三个方向的重力加速度；

 1 /*
 2
 3 * [deviceMotionHandler 摇一摇处理函数]
 4
 5 * @param {[type]} eventData [事件对象]
 6
 7 * @return {[type]} [无返回值]
 8
 9 * @author 刘国利、陈能堡、HTML5学堂
10
11 */
12
13 function deviceMotionHandler(eventData){
14
15 // acceleration加速度
16
17 var acceleration = eventData.accelerationIncludingGravity;
18
19 $(".wrap")[0].innerHTML = acceleration.x + " " + acceleration.y + " " + acceleration.z;
20
21 }

4、为了防止系统认为简单的变化也是在摇动手机，所以在每隔一段时间进行三个方向值的计算；

 1 // 获取当前时间
 2
 3 curTime = new Date().getTime();
 4
 5 if (curTime - lastTime > 100) {
 6
 7 // 计算出时间断
 8
 9 diffTime = curTime - lastTime;
10
11 // 记录上一次的时间
12
13 lastTime = curTime;
14
15 // 获取当前的三个方向的值
16
17 x = acceleration.x;
18
19 y = acceleration.y;
20
21 z = acceleration.z;
22
23 // 计算速度，为了防止出现负数，进行绝对值
24
25 speed = Math.abs((x + y + z - lastX - lastY - lastZ) / diffTime * 10000);
26
27 // 记录上一次三个方向的值
28
29 lastX = x;
30
31 lastY = y;
32
33 lastZ = z;
34
35 };

5、当计算的该值大于预定的值（阀值），执行相应的操作。

1 if (speed > SHAKE_THRESHOLD) {
2
3 alert("实现了摇一摇");
4
5 };

完整的实例

  1 var con = document.getElementById("con");
  2
  3 (function(){
  4
  5 // 监听运动传感事件，查看是否支持硬件运动
  6
  7 if (window.DeviceMotionEvent) {
  8
  9 window.addEventListener(‘devicemotion‘, deviceMotionHandler, false);
 10
 11 } else {
 12
 13 alert("您的设备不支持硬件调用");
 14
 15 }
 16
 17 // 变量初始化
 18
 19 var x = 0,
 20
 21 y = 0,
 22
 23 z = 0,
 24
 25 lastX = 0,
 26
 27 lastY = 0,
 28
 29 lastZ = 0,
 30
 31 curTime = 0,
 32
 33 lastTime = 0,
 34
 35 diffTime = 0,
 36
 37 speed = 0;
 38
 39 // 设置一个阀值
 40
 41 var SHAKE_THRESHOLD = 800; // 设定摇晃的阈值为600 运行相应操作
 42
 43 /*
 44
 45 * 功能：测算三个方向重力加速度，达到一定值进行相应操作
 46
 47 * 作者：HTML5学堂、刘国利、陈能堡
 48
 49 *
 50
 51 */
 52
 53 function deviceMotionHandler(eventData){
 54
 55 var acceleration = eventData.accelerationIncludingGravity;
 56
 57 // 获取当前时间
 58
 59 curTime = new Date().getTime();
 60
 61 // 计算时间差，当这个差值大于一定值执行计算三个方向的速度
 62
 63 if ((curTime - lastTime) > 100) {
 64
 65 // 记录上一次的时间
 66
 67 diffTime = curTime - lastTime;
 68
 69 lastTime = curTime;
 70
 71 // 获取当前三个方向的值
 72
 73 x = acceleration.x;
 74
 75 y = acceleration.y;
 76
 77 z = acceleration.z;
 78
 79 // 计算速度，为了防止出现负数，进行绝对值
 80
 81 speed = Math.abs((x + y + z - lastX - lastY - lastZ) / diffTime * 8000);
 82
 83 if (speed > SHAKE_THRESHOLD) {
 84
 85 alert("我实现摇一摇了");
 86
 87 };
 88
 89 // 记录上一次三个方向的值
 90
 91 lastX = x;
 92
 93 lastY = y;
 94
 95 lastZ = z;
 96
 97 };
 98
 99 }
100
101 })();

原文地址：https://www.cnblogs.com/mhxy13867806343/p/8446185.html