這篇文章主要為大家詳細(xì)介紹了javascript html5搖一搖功能的實(shí)現(xiàn)過(guò)程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

通過(guò)網(wǎng)上的資料，加上自己的整理，寫(xiě)了一份html搖一搖功能的簡(jiǎn)介，用做技術(shù)備份。

知識(shí)要點(diǎn) 

1、DeviceMotionEvent

這是html5支持的重力感應(yīng)事件，關(guān)于文檔請(qǐng)看：http://w3c.github.io/deviceorientation/spec-source-orientation.html

事件介紹：

deviceorientation 提供設(shè)備的物理方向信息，表示為一系列本地坐標(biāo)系的旋角。

devicemotion 提供設(shè)備的加速信息，表示為定義在設(shè)備上的坐標(biāo)系中的卡爾迪坐標(biāo)。其還提供了設(shè)備在坐標(biāo)系中的自轉(zhuǎn)速率。若可行的話，事件應(yīng)該提供設(shè)備重心處的加速信息。

compassneedscalibration 用于通知Web站點(diǎn)使用羅盤(pán)信息校準(zhǔn)上述事件。

2、事件簡(jiǎn)介

window.addEventListener("deviceorientation",function(event){// 處理event.alpha、event.beta及event.gamma},true);

{alpha:90,

 beta:0,

 gamma:0};

這是 deviceorientation事件返回的參數(shù)，為了獲得羅盤(pán)指向，可以簡(jiǎn)單的使用360度減去alpha。若設(shè)被平行于水平表面，其羅盤(pán)指向?yàn)?360 - alpha)。 若用戶手持設(shè)備，屏幕處于一個(gè)垂直平面且屏幕頂端指向上方。beta的值為90，alpha和gamma無(wú)關(guān)。 用戶手持設(shè)備，面向alpha角度，屏幕處于一個(gè)垂直屏幕，屏幕頂端指向右方，則其方向信息如下

{alpha:270- alpha,

 beta:0,

 gamma:90};

注冊(cè)一個(gè)devicemotion事件的接收器：

代碼如下:

window.addEventListener("devicemotion",function(event){// 處理event.acceleration、event.accelerationIncludingGravity、// event.rotationRate和event.interval},true);

將設(shè)備安置于車輛之上，屏幕處于一個(gè)垂直平面，頂端向上，面向車輛后部。車輛行駛速度為v，向右側(cè)進(jìn)行半徑為r的轉(zhuǎn)彎。設(shè)備記錄acceleration 和accelerationIncludingGravity在位置x處的情況，同時(shí)設(shè)備還會(huì)記錄rotationRate.gamma的負(fù)值：

{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}}; 

功能實(shí)現(xiàn)

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){

 //簡(jiǎn)單的搖一搖觸發(fā)代碼

 alert(1);

 }

 lastX = x;

 lastY = y;

 lastZ = z;

 }

首先判斷瀏覽器是否支持該事件。

YaoYiYao用來(lái)檢測(cè)是否對(duì)手機(jī)進(jìn)行搖動(dòng)操作，具體就是獲取手機(jī)的的移動(dòng)數(shù)據(jù)，將其存在一個(gè)外部變量中，當(dāng)下次又觸發(fā)搖動(dòng)事件時(shí)，判斷上次的搖動(dòng)坐標(biāo) 和現(xiàn)在的搖動(dòng)坐標(biāo) 是否處于一個(gè)頻繁調(diào)動(dòng)的范圍：Math.abs(x-lastX)> speed ||Math.abs(y-lastY)> speed ||Math.abs(z-lastZ)> speed

基本上 滿足這種條件的話，就是手機(jī)正處于搖動(dòng)狀態(tài)，在if語(yǔ)句里面添加進(jìn)你要執(zhí)行的搖一搖代碼即可。

以上就是html5搖一搖功能的實(shí)現(xiàn)思路，希望對(duì)大家的學(xué)習(xí)有所幫助。