function init(){
　　if (window.DeviceMotionEvent) {
　　　　// 移動瀏覽器支持運動傳感事件
　　　　window.addEventListener(‘devicemotion‘, deviceMotionHandler, false);
　　} 
}
var SHAKE_THRESHOLD = 3000;
// 定義一個變量保存上次更新的時間
var last_update = 0;
// 緊接著定義x、y、z記錄三個軸的數據以及上一次出發的時間
var x;
var y;
var z;
var last_x;
var last_y;
var last_z;
 
var count = 0;

function deviceMotionHandler(eventData) {
　　// 獲取含重力的加速度
　　var acceleration = eventData.accelerationIncludingGravity; 

　　// 獲取當前時間
　　var curTime = new Date().getTime(); 
　　var diffTime = curTime -last_update;
　　// 固定時間段
　　if (diffTime > 100) {
　　　　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 * 30000; 

　　　　if (speed > SHAKE_THRESHOLD) { 
　　　　　　// 在此處可以實現搖一搖之後所要進行的數據邏輯操作
　　　　}
      //記錄上一次加速度
　　　　last_x = x; 
　　　　last_y = y; 
　　　　last_z = z; 
　　} 
}

HTML5晃動DeviceMotionEvent事件

現在很多的手機頁面上也有搖一搖功能了，比如什麽領取紅包，還有那種死命搖搖到100%彈出個什麽東西來著，在坑爹點的搖個女票-_-//

deviceMotionHandler://運動傳感器處理

last_update=curTime;//記錄上一次搖動的時間
x=acceleration.x;//獲取加速度X方向
y=acceleration.y;//獲取加速度Y方向
z=acceleration.z;//獲取加速度垂直方向

if (speed > SHAKE_THRESHOLD) {
　　　　　　// 在此處可以實現搖一搖之後所要進行的數據邏輯操作

}

然後再這裏你可以做你想做的操作了

比如彈個框（你啥都沒中到）

再比如來個

X++然後搖啊搖搖到100彈個什麽

最後你可以在頁面調用就可以了

<script>
$(document).ready(function(){
init();
});
</script>

用js實現搖一搖功能