利用HTML5的devicemotion事件实现手机摇一摇抽奖，年会抽奖，html5devicemotion
摇一摇JS脚本逻辑：
接下来是移动端JS脚本逻辑的实现，摇一摇的实现需借助html5新增的devicemotion事件，获取设备在位置和方向上的改变速度的相关信息，该事件的基本使用如下：
if(window.DeviceMotionEvent) {
window.addEventListener('devicemotion', handler, !1);
lastTime= newDate();
}else{
alert('你的浏览器不支持摇一摇功能.');
}
devicemotion事件对象中有一个accelerationIncludingGravity属性，该属性包括：一个包含x、y 和z 属性的对象，在考虑z 轴自然重力加速度的情况下，告诉你在每个方向上的加速度。该API的具体使用大家可以参考网上的资料，非常多，这里就不重复了。 摇一摇的具体逻辑如下：
functionhandler(e) {var current =e.accelerationIncludingGravity;varcurrentTime;vartimeDifference;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= newDate;
timeDifference= currentTime.getTime() -lastTime.getTime();//时间间隔
if (timeDifference >timeout) {//触发摇一摇事件
dealShake();
lastTime= newDate;
}
}
lastX=current.x;
lastY=current.y;
lastZ=current.z;
}
不考虑各等奖的中奖概率问题
最终完整代码示例：
1
2
3
4
5
6
摇一摇抽奖
7
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
11
12
13
苹果手机html5摇一摇游戏戏码 利用HTML5的devicemotion事件实现手机摇一摇抽奖 年会抽奖 html5devicemotion...
