javascript html5搖一搖功能的實現

2020-03-24 16:00:48

字體：大中小

來源：轉載

供稿：網友

通過網上的資料，加上自己的整理，寫了一份html搖一搖功能的簡介，用做技術備份。
知識要點1、DeviceMotionEvent
這是html5支持的重力感應事件，關于文檔請看：http://w3c.github.io/deviceorientation/spec-source-orientation.html
事件介紹：
deviceorientation 提供設備的物理方向信息，表示為一系列本地坐標系的旋角。
devicemotion 提供設備的加速信息，表示為定義在設備上的坐標系中的卡爾迪坐標。其還提供了設備在坐標系中的自轉速率。若可行的話，事件應該提供設備重心處的加速信息。
compassneedscalibration 用于通知Web站點使用羅盤信息校準上述事件。
2、事件簡介
window.addEventListener("deviceorientation",function(event){// 處理event.alpha、event.beta及event.gamma},true);{alpha:90, beta:0, gamma:0}; 這是 deviceorientation事件返回的參數，為了獲得羅盤指向，可以簡單的使用360度減去alpha。若設被平行于水平表面，其羅盤指向為(360 - alpha)。若用戶手持設備，屏幕處于一個垂直平面且屏幕頂端指向上方。beta的值為90，alpha和gamma無關。用戶手持設備，面向alpha角度，屏幕處于一個垂直屏幕，屏幕頂端指向右方，則其方向信息如下
{alpha:270- alpha, beta:0, gamma:90}; 注冊一個devicemotion事件的接收器：
復制代碼代碼如下:window.addEventListener("devicemotion",function(event){// 處理event.acceleration、event.accelerationIncludingGravity、// event.rotationRate和event.interval},true);將設備安置于車輛之上，屏幕處于一個垂直平面，頂端向上，面向車輛后部。車輛行駛速度為v，向右側進行半徑為r的轉彎。設備記錄acceleration 和accelerationIncludingGravity在位置x處的情況，同時設備還會記錄rotationRate.gamma的負值：
{acceleration:{x: v^2/r, y:0, z:0}, accelerationIncludingGravity:{x: v^2/r, y:0, z:9.81}, rotationRate:{alpha:0, beta:0, gamma:-v/r*180/pi}}; 功能實現
if(window.DeviceMotionEvent){ window.addEventListener('devicemotion', YaoYiYao,false); var speed =30;//speed var x = y = z = lastX = lastY = lastZ =0; function YaoYiYao(eventData){ var acceleration =eventData.accelerationIncludingGravity; x = acceleration.x; y = acceleration.y; z = acceleration.z; if(Math.abs(x-lastX) speed ||Math.abs(y-lastY) speed ||Math.abs(z-lastZ) speed){ //簡單的搖一搖觸發代碼 alert(1); lastX = x; lastY = y; lastZ = z; } 首先判斷瀏覽器是否支持該事件。
YaoYiYao用來檢測是否對手機進行搖動操作，具體就是獲取手機的的移動數據，將其存在一個外部變量中，當下次又觸發搖動事件時，判斷上次的搖動坐標和現在的搖動坐標是否處于一個頻繁調動的范圍：Math.abs(x-lastX) speed ||Math.abs(y-lastY) speed ||Math.abs(z-lastZ) speed
基本上滿足這種條件的話，就是手機正處于搖動狀態，在if語句里面添加進你要執行的搖一搖代碼即可。以上就是html5搖一搖功能的實現思路，希望對大家的學習有所幫助。更多編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：JavaScript-Js腳本處理html元素的自定義屬性解析(親測兼容Firefox與IE)

下一篇：javascript通過獲取html標簽屬性class實現多選項卡的方法