H5 JS實現手機搖一搖功能

2022-07-25 11:42:10 字數 800 閱讀 4145

為了實現它,就需要用到html5的deviceorientation特性。它提供的devicemotion事件封裝了裝置的運動感測器時間,通過改時間可以獲取裝置的運動狀態、加速度等資料(另還有deviceorientation事件提供了裝置角度、朝向等資訊)。

而通過devicemotion對裝置運動狀態的判斷,則可以幫助我們在網頁上就實現「搖一搖」的互動效果。

現在把完整**記錄下:

1

//運動事件監聽2if

(window.devicemotionevent) 56

//獲取加速度資訊7//

通過監聽上一步獲取到的x, y, z 值在一定時間範圍內的變化率,進行裝置是否有進行晃動的判斷。8//

而為了防止正常移動的誤判,需要給該變化率設定乙個合適的臨界值。

9var shake_threshold = 4000;

10var last_update = 0;

11var x, y, z, last_x = 0, last_y = 0, last_z = 0;

12function

devicemotionhandler(eventdata)

25 last_x =x;

26 last_y =y;

27 last_z =z;28}

29 }

這樣搖一搖**就已經實現啦~~~

用js實現搖一搖功能

function init var shake threshold 3000 定義乙個變數儲存上次更新的時間 var last update 0 緊接著定義x y z記錄三個軸的資料以及上一次出發的時間 varx vary varz varlast x varlast y varlast z var...

HTML 5實現手機搖一搖的功能

html5另外乙個重要特性就是deviceorientation,它將底層的方向感測器和運動感測器進行了高階封裝,提供了dom事件的支援。這個特性包括兩種事件 1 deviceorientation 封裝了方向感測器資料的事件,可以獲取手機靜止狀態下的方向資料,例如手機所處角度 方位 朝向等。2 d...

ios 搖一搖功能實現

搖一搖功能的實現,這裡簡單的介紹兩種 1 根據加速計的值來判斷,比如說可以根據acceleration.x,acceleration.y,acceleration.z的值來判斷是否搖動了。關於感測器的介紹可以看我的這篇文章 void motionbegan uieventsubtype motion...