手机摇一摇的功能的实现是利用HTML5的devicemotion事件，如果想要实现摇一摇首先手机要支持这个事件，目前大部分的手机也都已经支持这类事件了，但是以防万一，加上事件判断更好。
说一下大致思路：
总体就是通过devicemotion方法获取到当前设备各个方向的加速度，有X、Y、Z三个方向，我的思路是检测某一个方向的加速度超过预定的值，就认为是摇一摇事件，这时触发摇一摇事件。
这里注意的是在摇一摇的过程中可能用户要了好几次才完成这个摇一摇的过程，这就需要加上一个判断，即在某一段时间内摇一摇多次发生认为是一次发生，代码上的表现就是查询这一次摇动发生的时间和上一次摇动发生的时间是不是小于一个时间段（如1000毫秒），这样就不会频繁的触发时间了，不多说了，直接上代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>this is shaking test</h1>
<script type="text/javascript" charset="utf-8">
function Shake () {
this.rock_opt = {
speed: 15,
nowX: 0,
nowY: 0,
endX: 0,
endY: 0
};
this.timeout = 1000;
this.lastTime = new Date(0);
this.shaked = false;
}
Shake.prototype.init = function () {
if (window.DeviceMotionEvent) {
window.addEventListener(\'devicemotion\', bind(this, this.on_devicemotion), false);
} else {
this.isRockReady = false;
alert(\'your servive don\\'t support shake\');
}
};
Shake.prototype.on_devicemotion = function (e) {
/*这里也可以替换换通过时间来判断摇一摇是否是同一次*/
// if(this.shaked){//只摇一次
// return;
// }
var currentTime = new Date();
var timeDifference;
var acceleration = e.accelerationIncludingGravity;
this.rock_opt.nowX = acceleration.x;
this.rock_opt.nowY = acceleration.y;
if (Math.abs(this.rock_opt.nowX - this.rock_opt.endX) > this.rock_opt.speed || Math.abs(this.rock_opt.nowY - this.rock_opt.endY) > this.rock_opt.speed) {
timeDifference = currentTime.getTime() - this.lastTime.getTime();
alert(timeDifference)
if(timeDifference > this.timeout){
alert("your device shaked222");
// this.shaked = true;
this.lastTime = new Date();
}
}
this.rock_opt.endX = this.rock_opt.nowX;
this.rock_opt.endY = this.rock_opt.nowY;
};
var shake = new Shake();
shake.init();
function bind (obj, fn){
return function() {
return fn.apply(obj, Array.prototype.slice.call(arguments));
}
}
</script>
</body>
</html>