JS 實現(xiàn)搖一搖

廢話不多說,先上代碼

if (window.DeviceMotionEvent) {
  window.addEventListener('devicemotion',deviceMotionHandler, false);
}else{
  console.log('不支持DeviceMotionEvent');
}
var speed = 20;//speed
var x = y = z = lastX = lastY = lastZ = 0;
function deviceMotionHandler(event) {
  var acceleration =event.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) {
//簡單的搖一搖觸發(fā)代碼
console.log('搖一搖啊');
  }
  lastX = x;
  lastY = y;
  lastZ = z;
}

首先判斷瀏覽器是否支持window.DeviceMotionEvent,
DeviceMotionEvent為web開發(fā)者提供了關(guān)于設(shè)備的位置和方向改變的速度的信息。
如果支持則監(jiān)聽devicemotion事件。如果設(shè)備在X,Y,Z軸方向上有位移,那么回調(diào)函數(shù)中的參數(shù)event對象中就會反應(yīng)出來。



這里我們用到event對象中的accelerationIncludingGravity屬性,它提供了設(shè)備在X,Y,Z軸方向上帶重力的加速度的對象。
通過判斷前后兩次重力加速度差來判斷手機是否被搖了。
Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed
只要x,y,z軸任意方向滿足條件就判定被搖

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • ¥開啟¥ 【iAPP實現(xiàn)進入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個線程,因...
    小菜c閱讀 7,328評論 0 17
  • 學(xué)不可以已 今天有幸參與了席殊書屋舉行的《非暴力溝通》讀書會,收獲頗豐。 首先就是看到了一個團體,一個以自我提升為...
    身無彩鳳心有靈犀閱讀 347評論 0 1
  • 養(yǎng)父母之身,是為下孝也; 養(yǎng)父母之心,是為中孝也; 養(yǎng)父母之志,是為大孝也;
    小小角的夢幻之旅閱讀 176評論 0 1
  • “人生之路,走走停停是一種閑適,邊走邊看是一種優(yōu)雅,邊走邊忘是一種豁達。” 走走停停,邊走邊看,邊走邊忘… 有些事...
    舊城xu閱讀 286評論 0 0

友情鏈接更多精彩內(nèi)容