利用HTML5的devicemotion事件实现手机摇一摇抽奖，年会抽奖

摇一摇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;
}

不考虑各等奖的中奖概率问题

最终完整代码示例：

Jukedeck

一个由人工智能驱动的音乐创作工具，允许用户为各种项目生成免版税的音乐。

下载

    
    
    
   


    
 
    
    



shake.html

更多利用HTML5的devicemotion事件实现手机摇一摇抽奖，年会抽奖相关文章请关注PHP中文网！

立即学习“前端免费学习笔记（深入）”；