移动端之摇一摇

原文链接： https://www.mk2048.com/blog/blog.php?id=h0bak0j1h0bb&title=%E7%A7%BB%E5%8A%A8%E7%AB%AF%E4%B9%8B%E6%91%87%E4%B8%80%E6%91%87

移动端之摇一摇

一、移动端重力感应事件

window.devicemotion事件在一个固定的间隔（极快的时间间隔）内被触发，并指定了设备在那个时候接收到的加速度的物理力的大小
在devicemotion事件回调函数的event参数中，有个属性可以来获取设备的运动传感器的加速度数据，
event.accelerationIncludingGravity返回一个DeviceAcceleration对象
DeviceAcceleration对象可以提供有关设备沿三个轴（x、y、z）的加速度的信息
DeviceAcceleration.x 沿X轴的加速度量（只读）
DeviceAcceleration.y 沿Y轴的加速度量（只读）
DeviceAcceleration.z 沿Z轴的加速度量（只读）

二、兼容安卓

//判断当前机型是否为安卓，如果是安卓返回true 如果不是安卓返回false

function getAdr(){
    var u = navigator.userAgent;
    return u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; 
}

三、js代码实现

window.onload = function(){    
        document.addEventListener("touchstart", function(ev){
            ev = ev || event;
            ev.preventDefault();
        });
        var lastTime = 0;
        var lastX = 0;    
        var isShake = false;
        window.addEventListener("devicemotion", function(ev){    
            var now = new Date().getTime();
            if(now - lastTime > 200){
                ev = ev || event;
                var motion = ev.accelerationIncludingGravity;
                var x = Math.round(motion.x);

                if(getAdr()){
                    x = -x;
                }
                if(lastX === 0){
                    lastX = x;
                    return;
                }
                if(Math.abs(x-lastX)>10){
                    isShake = true;
                }
                if(isShake && Math.abs(x-lastX)<2){
                    alert("摇一摇");
                    isShake = false;
                }
                lastX = x;
                lastTime = now;
            }
        })
        function getAdr(){
            var u = navigator.userAgent;
            return u.indexOf("Andriod")>-1 || u.indexOf("Adr")>-1;
        }
    }

更多专业前端知识，请上 【猿2048】www.mk2048.com