用js實現搖一搖功能

標籤：date()   變數   handler   div   list   style   lis   fft   gravity   

function init(){　　if (window.DeviceMotionEvent) {　　　　// 行動瀏覽器支援運動感測事件　　　　window.addEventListener(‘devicemotion‘, deviceMotionHandler, false);　　} }var SHAKE_THRESHOLD = 3000;// 定義一個變數儲存上次更新的時間var last_update = 0;// 緊接著定義x、y、z記錄三個軸的資料以及上一次出發的時間var x;var y;var z;var last_x;var last_y;var last_z;var count = 0;function deviceMotionHandler(eventData) {　　// 擷取含重力的加速度　　var acceleration = eventData.accelerationIncludingGravity; 　　// 擷取目前時間　　var curTime = new Date().getTime(); 　　var diffTime = curTime -last_update;　　// 固定時間段　　if (diffTime > 100) {　　　　last_update = curTime; 　　　　x = acceleration.x; 　　　　y = acceleration.y; 　　　　z = acceleration.z; 　　　　var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 30000; 　　　　if (speed > SHAKE_THRESHOLD) { 　　　　　　// 在此處可以實現搖一搖之後所要進行的資料邏輯操作　　　　}      //記錄上一次加速度　　　　last_x = x; 　　　　last_y = y; 　　　　last_z = z; 　　} }

HTML5晃動DeviceMotionEvent事件

現在很多的手機頁面上也有搖一搖功能了，比如什麼領取紅包，還有那種死命搖搖到100%彈出個什麼東西來著，在坑爹點的搖個女票-_-//

deviceMotionHandler://動作感應器處理

last_update=curTime;//記錄上一次搖動的時間
x=acceleration.x;//擷取加速度X方向
y=acceleration.y;//擷取加速度Y方向
z=acceleration.z;//擷取加速度垂直方向

 

if (speed > SHAKE_THRESHOLD) { 
　　　　　　// 在此處可以實現搖一搖之後所要進行的資料邏輯操作

}

然後再這裡你可以做你想做的操作了

比如彈個框（你啥都沒中到）

再比如來個

X++然後搖啊搖搖到100彈個什麼

最後你可以在頁面調用就可以了

<script>$(document).ready(function(){init();});</script>

 

用js實現搖一搖功能