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 < 5) {
            _iSshakeXnums.push(_ISshakespeedX);

        } else {
            _iSshakeXnum = 0;

            _iSshakeXnum_val = 0

            $.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 += 100;
            }

        }


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

    }, 100);

 

檢測是否持續搖

 

    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);
    }

具體效果掃一掃下方二維碼