搖一搖JS腳本邏輯：
接下來是移動端JS腳本邏輯的實現，搖一搖的實現需借助html5新增的devicemotion事件，獲取設備在位置和方向上的改變速度的相關信息，該事件的基本使用如下：
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', handler, !1);
lastTime = new Date();
} else {
alert('你的瀏覽器不支持搖一搖功能.');
}
devicemotion事件對象中有一個accelerationIncludingGravity屬性，該屬性包括：一個包含x、y 和z 屬性的對象，在考慮z 軸自然重力加速度的情況下，告訴你在每個方向上的加速度。該API的具體使用大家可以參考網上的資料，非常多，這里就不重復了。 搖一搖的具體邏輯如下：
function handler(e) {
var current = e.accelerationIncludingGravity;
var currentTime;
var timeDifference;
var deltaX = 0;
var deltaY = 0;
var deltaZ = 0;
//記錄上一次設備在x,y,z方向上的加速度
if ((lastX === null) && (lastY === null) && (lastZ === null)) {
lastX = current.x;
lastY = current.y;
lastZ = current.z;
return;
}
//得到兩次移動各個方向上的加速度絕對差距
deltaX = Math.abs(lastX - current.x);
deltaY = Math.abs(lastY - current.y);
deltaZ = Math.abs(lastZ - current.z);
//當差距大於設定的閥值並且時間間隔大於指定閥值時，觸發搖一搖邏輯
if (((deltaX > threshold) && (deltaY > threshold)) || ((deltaX > threshold) && (deltaZ > threshold)) || ((deltaY > threshold) && (deltaZ > threshold))) {
currentTime = new Date;
timeDifference = currentTime.getTime() - lastTime.getTime();
//時間間隔
if (timeDifference > timeout) {
//觸發搖一搖事件
dealShake();
lastTime = new Date;
}
}
lastX = current.x;
lastY = current.y;
lastZ = current.z;
}
不考慮各等獎的中獎概率問題
最終完整代碼示例：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
6 <title>搖一搖抽獎</title>
7 <style type="text/css">
8 html,body{ width:100%; height:100%; background-color: #000; margin:0; overflow: hidden;}
9 .tip{ position: absolute; bottom: 30px; left: 10px; color: #fff; font-family: '楷體'; text-align: center; right: 10px; height: 32px; line-height: 32px; background-color: rgba(255,255,255,.4); border-radius: 3px; } .tip.active{ -webkit-animation: jump 1.5s linear; animation: jump 1s linear; }
10 </style>
11 </head>
12 <body>
13 <div class="tip" id="tip"> </div>
14
15 <script type="text/javascript">
16 var lastX = null,
17 lastY = null,
18 lastZ = null;
19 var threshold = 3; //靈敏度（值越小靈敏度越高）
20 var timeout = 1000;
21 var lastTime = null;
22 var isShaking = !1;
23 document.addEventListener('DOMContentLoaded', function (e) {
24 ready();
25 }, !1);
26
27 /*腳本邏輯：
28 *移動端JS腳本邏輯的實現，搖一搖的實現需借助html5新增的devicemotion事件，獲取設備在位置和方向上的改變速度的相關信息。
29 *devicemotion事件對象中有一個accelerationIncludingGravity屬性，該屬性包括：一個包含x、y 和z 屬性的對象，在考慮z 軸自然重力加速度的情況下，告訴你在每個方向上的加速度。
30 */
31 function ready() {
32 if (window.DeviceMotionEvent) {
33 window.addEventListener('devicemotion', handler, !1);
34 lastTime = new Date();
35 } else {
36 alert('你的瀏覽器不支持搖一搖功能.');
37 }
38 }
39
40 function handler(e) {
41 var current = e.accelerationIncludingGravity;
42 var currentTime;
43 var timeDifference;
44 var deltaX = 0;
45 var deltaY = 0;
46 var deltaZ = 0;
47
48 //記錄上一次設備在x,y,z方向上的加速度
49 if ((lastX === null) && (lastY === null) && (lastZ === null)) {
50 lastX = current.x;
51 lastY = current.y;
52 lastZ = current.z;
53 return;
54 }
55
56 //得到兩次移動各個方向上的加速度絕對差距
57 deltaX = Math.abs(lastX - current.x);
58 deltaY = Math.abs(lastY - current.y);
59 deltaZ = Math.abs(lastZ - current.z);
60 //當差距大於設定的閥值並且時間間隔大於指定閥值時，觸發搖一搖邏輯
61 if (((deltaX > threshold) && (deltaY > threshold)) || ((deltaX > threshold) && (deltaZ > threshold)) || ((deltaY > threshold) && (deltaZ > threshold))) {
62 currentTime = new Date;
63 timeDifference = currentTime.getTime() - lastTime.getTime();
64 //時間間隔
65 if (timeDifference > timeout) {
66 //觸發搖一搖事件
67 dealShake();
68 lastTime = new Date;
69 }
70 }
71
72 lastX = current.x;
73 lastY = current.y;
74 lastZ = current.z;
75 }
76
77 function dealShake() {
78 if (isShaking) return;
79 isShaking = !0;
80
81 document.getElementById("tip").innerHTML = "恭喜您，搖中：" + GetName();
82
83 setTimeout(function () {
84 isShaking = !1;
85 document.getElementById("tip").innerHTML = " ";
86 }, 1000);
87
88 }
89
90 function GetName() {
91 var chars = ["一等獎", "二等獎", "三等獎", "四等獎", "五等獎"];
92 return chars[GetRandom(0, chars.length - 1)];
93 }
94 function GetRandom(minValue, maxValue) {
95 return Math.round(Math.random() * (maxValue - minValue)) + minValue;
96 }
97 </script>
98
99 </body>