js检测手机摇一摇

1.检测设备是否支持重力感应事件deviceorientation

deviceorientation 提供设备的物理方向信息，表示为一系列本地坐标系的旋角

function motionHandler(event) {

    accGravity = event.acceleration;

}

 if (window.DeviceMotionEvent) {

        window.addEventListener("devicemotion", motionHandler, false);

    } else {

        document.body.innerHTML = "What user agent u r using???";

}

　　

简单的开始摇一摇

$(".start_btn").on("click", function () {
alert("开启摇一摇le");
window.addEventListener('devicemotion', deviceMotionHandler, false);
})
var speed = 20;//speed
var x = y = z = lastX = lastY = lastZ = 0;
function deviceMotionHandler(eventData) {
var acceleration = eventData.accelerationIncludingGravity;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
if (Math.abs(x - lastX) > speed || Math.abs(y - lastY) > speed || Math.abs(z - lastZ) > speed) {
//简单的摇一摇触发代码
alert(1);
$("body").prepend("<p>accelerationX:" + acceleration.x + "</p>");
$("body").prepend("<p>accelerationY:" + acceleration.y + "</p>");
$("body").prepend("<p>accelerationZ:" + acceleration.z + "</p>");

window.removeEventListener('devicemotion', deviceMotionHandler, false);
}
lastX = x;
lastY = y;
lastZ = z;
}

　　参考链接请扫一扫这里

适用场景：一次性或者多次性间断的摇一摇情况可以使用

其原理是通过对比xy或z的加速度和一个给定的值去比较。如何大于给定的值我们就认定他要过了。。

下面我们看一下，如何检测用户是在始终不停的摇没有停下来呢？

我们可以设置一个时间戳，每隔一段时间去检测一下xy或z的加速度，保证我们每次去检测的时候他的值都是大于一个给定的值，这样就能说明用户一直是出于摇动状态的。。但如果一直始终保持在摇动的状态，难度会比较大。。我们折中一点，去取平均值，

每个一段时间我记录一下摇动的某一坐标的加速度，然后把每一次记录的加速度值加起来去比记录的总次数。

检测是否开始摇

 var setInterIsShake = setInterval(function () {

        /************_ISshakespeed****************/
        var _ISshakespeedX = accGravity.x;

        _ISshakespeedX = Math.abs(_ISshakespeedX);

        _iSshakeXnum++;
        if (_iSshakeXnum < ) {
            _iSshakeXnums.push(_ISshakespeedX);

        } else {
            _iSshakeXnum = ;

            _iSshakeXnum_val = 

            $.each(_iSshakeXnums, function (i, n) {

                _iSshakeX_val += n;

            });

            _iSshakeX_val = _iSshakeX_val / _iSshakeXnums.length
            _iSshakeXnums = [];

            //$(".debug_box").prepend("<p>_iSshakeX_val:  " + _iSshakeX_val + "</p>");//调试0818

        }

        /****************************/

        /************_ISshakespeed****************/
        var _ISshakespeedY = accGravity.y;

        _ISshakespeedY = Math.abs(_ISshakespeedY);

            if (_iSshakeX_val >) {
               // alert("开始摇了");

                clearInterval(setIntervalTime2)

                //有变化了开始加时间
                _time += ;
            }

        }

        /****************************/

    }, );

检测是否持续摇

    var _loopnum = 0;
    var _loopnums = [];
    var _loopnum_val = 0;

    function setIntervalTimeFun() {
        var setIntervalTime = setInterval(function () {

            _time += 100;

            //x
            var _shakespeed = accGravity.x;

            _shakespeed = Math.abs(_shakespeed);

            var _isstartskake = 0;

            _loopnum++;
            if (_loopnum < 5) {
                _loopnums.push(_shakespeed);

            } else {
                _loopnum = 0;

                _loopnum_val = 0

                $.each(_loopnums, function (i, n) {

                    _loopnum_val += n;

                });

                _loopnum_val = _loopnum_val / _loopnums.length
                _loopnums = [];

            }

            _loopnum++;
            if (_loopnum < 5) {
                _loopnums.push(_shakespeed);

            } else {
                _loopnum = 0;

                _loopnum_val = 0

                $.each(_loopnums, function (i, n) {

                    _loopnum_val += n;

                });

                _loopnum_val = _loopnum_val / _loopnums.length
                _loopnums = [];

            }

                if (_loopnum_val < 6 ) {-----中断持续摇动

                    // alert("小于6")

                     clearInterval(setIntervalTime);

                     _sec = _time / 1000;

                    //开始抽奖
                    TestlotteryFun(_sec);

                } else {
                    //alert("都大于6")-----持续摇动中

                    //  }

                }

            }

        }, 100);
    }

具体效果扫一扫下方二维码