貼**前,我們先講下一些基本常識。搖晃手機分為兩個行為,乙個時候開始搖晃手機,乙個是手機停止搖晃。這分別是兩個事件
要實現這個功能,我們只需要做兩件事。第乙個就是判斷是否開始搖晃(有效的搖晃)發生的事件(這裡是方向盤旋轉),第二個就是停止搖晃(方向盤復位)。
js:
var shakethreshold = 1000; //定義乙個搖動的閾值
var lastupdate = 0; //
記錄上一次搖動的時間
var x, y, z, lastx, lasty, lastz; //
定義x、y、z記錄三個軸的資料以及上一次觸發的資料 //
監聽感測器運動事件
if(window.devicemotionevent)
else //
運動感測器處理
function devicemotionhandler(eventdata)
lastx =x;
lasty =y;
lastz =z;
}}
//這是方向盤的旋轉** 這裡可以根據自己的需要來進行調整var x, y, n = 0, ny = 0
, rotint, rotyint
function rotatediv()
function rotateydiv()
function startrotate()
}}function startyrotate()
}}
html:(這裡放乙個圓形方向盤)
"rotate1
"class="
rotate3
">
微信小程式手機搖一搖功能
var socketopen false var count 0 var sockettask var url x ws位址 page onload function options onready function sockettask.onclose onclose sockettask.one...
HTML 5實現手機搖一搖的功能
html5另外乙個重要特性就是deviceorientation,它將底層的方向感測器和運動感測器進行了高階封裝,提供了dom事件的支援。這個特性包括兩種事件 1 deviceorientation 封裝了方向感測器資料的事件,可以獲取手機靜止狀態下的方向資料,例如手機所處角度 方位 朝向等。2 d...
H5 JS實現手機搖一搖功能
為了實現它,就需要用到html5的deviceorientation特性。它提供的devicemotion事件封裝了裝置的運動感測器時間,通過改時間可以獲取裝置的運動狀態 加速度等資料 另還有deviceorientation事件提供了裝置角度 朝向等資訊 而通過devicemotion對裝置運動狀...