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

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

 

js檢測手機搖一搖