HTML5 實現手機搖一搖

來源:互聯網
上載者:User

標籤: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 實現手機搖一搖

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.