標籤:time 初始化 res fft ima innerhtml ret com 檢測裝置
HTML5新增了一些JavaScript API介面,比如地理定位、重力感應等。今天主要介紹devicemotion事件(裝置事件),它提供裝置的加速資訊,表示為定義在裝置上的座標系。其還提供了裝置在座標系中的自轉速率。若可行的話,事件應該提供裝置重心處的加速資訊。本文給大家講解了HTML5實現手機搖一搖的效果。
手機搖一搖的實現思路:
1、檢測裝置是否支援重力感測;
1 // 監聽運動感測事件,查看是否支援硬體運動 2 3 if (window.DeviceMotionEvent) { 4 5 alert("您的裝置支援硬體調用"); 6 7 } else { 8 9 alert("您的裝置不支援硬體調用");10 11 }
View Code
2、綁定運動感測(devimotion)事件;
1 window.addEventListener(‘devicemotion‘, deviceMotionHandler, false);
View Code
3、根據devimotion事件對象,擷取三個方向的重力加速度;
1 /* 2 3 * [deviceMotionHandler 搖一搖處理函數] 4 5 * @param {[type]} eventData [事件對象] 6 7 * @return {[type]} [無傳回值] 8 9 * @author 劉國利、陳能堡、HTML5學堂10 11 */12 13 function deviceMotionHandler(eventData){14 15 // acceleration加速度16 17 var acceleration = eventData.accelerationIncludingGravity;18 19 $(".wrap")[0].innerHTML = acceleration.x + " " + acceleration.y + " " + acceleration.z;20 21 }
View Code
4、為了防止系統認為簡單的變化也是在搖動手機,所以在每隔一段時間進行三個方向值的計算;
1 // 擷取目前時間 2 3 curTime = new Date().getTime(); 4 5 if (curTime - lastTime > 100) { 6 7 // 計算出時間斷 8 9 diffTime = curTime - lastTime;10 11 // 記錄上一次的時間12 13 lastTime = curTime;14 15 // 擷取當前的三個方向的值16 17 x = acceleration.x;18 19 y = acceleration.y;20 21 z = acceleration.z;22 23 // 計算速度,為了防止出現負數,進行絕對值24 25 speed = Math.abs((x + y + z - lastX - lastY - lastZ) / diffTime * 10000);26 27 // 記錄上一次三個方向的值28 29 lastX = x;30 31 lastY = y;32 33 lastZ = z;34 35 };
View Code
5、當計算的該值大於預定的值(閥值),執行相應的操作。
1 if (speed > SHAKE_THRESHOLD) {2 3 alert("實現了搖一搖");4 5 };
View Code
完整的執行個體
1 var con = document.getElementById("con"); 2 3 (function(){ 4 5 // 監聽運動感測事件,查看是否支援硬體運動 6 7 if (window.DeviceMotionEvent) { 8 9 window.addEventListener(‘devicemotion‘, deviceMotionHandler, false); 10 11 } else { 12 13 alert("您的裝置不支援硬體調用"); 14 15 } 16 17 // 變數初始化 18 19 var x = 0, 20 21 y = 0, 22 23 z = 0, 24 25 lastX = 0, 26 27 lastY = 0, 28 29 lastZ = 0, 30 31 curTime = 0, 32 33 lastTime = 0, 34 35 diffTime = 0, 36 37 speed = 0; 38 39 // 設定一個閥值 40 41 var SHAKE_THRESHOLD = 800; // 設定搖晃的閾值為600 運行相應操作 42 43 /* 44 45 * 功能:測算三個方向重力加速度,達到一定值進行相應操作 46 47 * HTML5學堂、劉國利、陳能堡 48 49 * 50 51 */ 52 53 function deviceMotionHandler(eventData){ 54 55 var acceleration = eventData.accelerationIncludingGravity; 56 57 // 擷取目前時間 58 59 curTime = new Date().getTime(); 60 61 // 計算時間差,當這個差值大於一定值執行計算三個方向的速度 62 63 if ((curTime - lastTime) > 100) { 64 65 // 記錄上一次的時間 66 67 diffTime = curTime - lastTime; 68 69 lastTime = curTime; 70 71 // 擷取當前三個方向的值 72 73 x = acceleration.x; 74 75 y = acceleration.y; 76 77 z = acceleration.z; 78 79 // 計算速度,為了防止出現負數,進行絕對值 80 81 speed = Math.abs((x + y + z - lastX - lastY - lastZ) / diffTime * 8000); 82 83 if (speed > SHAKE_THRESHOLD) { 84 85 alert("我實現搖一搖了"); 86 87 }; 88 89 // 記錄上一次三個方向的值 90 91 lastX = x; 92 93 lastY = y; 94 95 lastZ = z; 96 97 }; 98 99 }100 101 })();
View Code
HTML5 實現手機搖一搖