移动端h5实现摇一摇抽奖

话不多说，老规矩，先上预览：blogai.cn

由于新换了服务器，还在备案审核中，所以，前面的预览地址都打不开了，等过几天就好了。

 

首先，我们先用css实现一个摇动的手机，能很好地带入用户。

实现如下：

html:

  

        

            
                摇一摇 有好礼
            
        
        

        

            
        
        

    

这样就实现了一个摇动的手机，如图所示：

要实现摇动，需要监听手机的摇动变化，可以使用html中的devicemotion实现。

首先要做的是查看设备是否支持运动传感事件。

if (window.DeviceMotionEvent) {
        window.addEventListener('devicemotion', shake) //devicemotion:获取设备的运动状态
    } else {
        document.getElementById('show').innerHTML = '换部手机试试~'
    }

然后设置一个阈值，当摇动大于阈值时，触发中奖函数。草率地计算下，具体实现等后续吧。。。

let max = 5000;   //晃动最大值，阈值
    let x, y, z, lastX, lastY, lastZ = 0;  //初始化x,y,z轴的加速度
    let lastTime, currentTime;
    lastTime = new Date().getTime();

    function shake(e) {
        let a = e.accelerationIncludingGravity; //获取加速度
        x = a.x;   //x,y,z轴上的加速度
        y = a.y;
        z = a.z;
        currentTime = new Date().getTime();
        //console.log(currentTime-lastTime);两次时间差
        if ((currentTime - lastTime) > 1000) {
            //这行的大致意思就是摇的越快，speed值越高
            var speed_ = Math.abs(x + y + z - lastX - lastY - lastZ) / (currentTime - lastTime) * 1000;
            document.getElementById('show').innerHTML = speed_.toFixed(2);
            lastTime = currentTime;
            lastX = x;
            lastY = y;
            lastZ = z;
        }
        if (speed_>max){
            window.removeEventListener('devicemotion',shake);
            document.getElementById('show').innerHTML = '来了老弟！'
        }
    }

好了，最后，预览地址：zjrzjr.cn