摇一摇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;
}
不考虑各等奖的中奖概率问题
最终完整代码示例:
摇一摇抽奖
html,body{ width:100%; height:100%; background-color: #000; margin:0; overflow: hidden;}
.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; }
var lastX = null,
lastY = null,
lastZ = null;
var threshold = 3; //灵敏度(值越小灵敏度越高)
var timeout = 1000;
var lastTime = null;
var isShaking = !1;
document.addEventListener('DOMContentLoaded', function (e) {
ready();
}, !1);
/*脚本逻辑:
*移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的devicemotion事件,获取设备在位置和方向上的改变速度的相关信息。
*devicemotion事件对象中有一个accelerationIncludingGravity属性,该属性包括:一个包含x、y 和z 属性的对象,在考虑z 轴自然重力加速度的情况下,告诉你在每个方向上的加速度。
*/
function ready() {
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', handler, !1);
lastTime = new Date();
} else {
alert('你的浏览器不支持摇一摇功能.');
}
}
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;
}
function dealShake() {
if (isShaking) return;
isShaking = !0;
document.getElementById("tip").innerHTML = "恭喜您,摇中:" + GetName();
setTimeout(function () {
isShaking = !1;
document.getElementById("tip").innerHTML = " ";
}, 1000);
}
function GetName() {
var chars = ["一等奖", "二等奖", "三等奖", "四等奖", "五等奖"];
return chars[GetRandom(0, chars.length - 1)];
}
function GetRandom(minValue, maxValue) {
return Math.round(Math.random() * (maxValue - minValue)) + minValue;
}
shake.html
更多利用HTML5的devicemotion事件实现手机摇一摇抽奖,年会抽奖相关文章请关注PHP中文网!
相关标签:Html5
发布php中文网,转载请注明出处,感谢您的尊重!