梦想之家

H5实现手机摇一摇的功能,js代码

废话不多说,直接上代码,在script中添加该代码即可测试

/**
* 手机摇一摇的动作是指手机在一定时间内移动了一定距离,也可以近似的理解为:手机以不低于一定的速度移动。
* 实现方法:监听 devicemotion 事件后,判断设备在 X、Y、Z 三个方向上移动的距离与前一次的距离差,并除以两次事件触发的时间差,即为设备移动的速度。将这个速度与预设的的速度对比,如果大于预先设置的值,则认为设备在发生摇动。这个预先设定的速度可以进行多次测试后,取它们的平均值。
* 具体代码如下(用手机打开页面摇一摇即可看到效果):
*/
if( window.DeviceMotionEvent ) {
    window.addEventListener('devicemotion',motionHanlder,false);
    const SHAKE_SPEED = 300 //摇动的速度阈值
    let lastTime = 0;       //上次变化的时间
    let x = y = z =lastX = lastY = lastZ = 0;   //位置变量初始化

    function motionHanlder(evt){
        //取得包含重力加速的位置信息
        let acceleration = evt.accelerationIncludingGravity;
        // 当前的时间
        let nowTime = Date.now();
        if( (nowTime - lastTime) > 120 ) {   
            let diffTime = nowTime-lastTime; //两次变化的时间差
            lastTime = nowTime;                 //当前时间保存
            x = acceleration.x;
            y = acceleration.y;
            z = acceleration.z;
            //计算摇动的速度
            let speed = Math.abs(x+y+z - lastX-lastY-lastZ)/ diffTime*1000;
            if( speed > SHAKE_SPEED ) {
                alert('你摇了手机');
            }
            lastX = x;
            lasty = y;
            lastZ = z;
        }
    }
}

效果图如下:
aa.png

相关推荐

您此刻的心情: