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>

?

總結

以上是生活随笔為你收集整理的Javascript网页摇一摇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。