為了實現它,就需要用到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...