DeviceOrientation將底層的方向傳感器和運動傳感器進行了高級封裝，提供了DOM事件的支持。

這個特性包括兩個事件：

1、deviceOrientation：封裝了方向傳感器數據的事件，可以獲取手機靜止狀態下的方向數據（手機所處的角度、方位和朝向等）。

2、deviceMotion：封裝了運動傳感器的事件，可以獲取手機運動狀態下的運動加速度等數據。

使用這兩個事件，可以很能夠實現重力感應、指南針等有趣的功能。

現在在很多Native應用中有一個非常常見而時尚的功能 —— 搖一搖，搖一搖找人、搖一搖看新聞、搖一搖找金幣。。。

也許在android或者ios的客戶端上對這個功能你已經很了解了，但是現在，我將告訴你如何在手機網頁上實現搖一搖的功能。

先來讓我們了解一下設備運動事件 —— DeviceMotionEvent:返回設備關于加速度和旋轉的相關信息，其中加速度的數據包含以下三個方向：

x：橫向貫穿手機屏幕；

y：縱向貫穿手機屏幕；

z：垂直手機屏幕。

鑒于有些設備沒有排除重力的影響，所以該事件會返回兩個屬性：

1、accelerationIncludingGravity(含重力的加速度)

2、acceleration(排除重力影響的加速度)

打碼之前我們先要知道幾點：

1、其實用戶在搖動手機的時候始終都是以一個方向為主進行搖動的；

2、用戶在搖動手機的時候在x、y、z三個方向都會有相應的想速度的變化；

3、不能把用戶正常的手機運動行為當做搖一搖（手機放在兜里，走路的時候也會有加速度的變化）。

從以上三點考慮，針對三個方向上的加速度進行計算，間隔測量他們，考察他們在固定時間段里的變化率，而且需要確定一個閥值來觸發搖一搖之后的操作。

事件1：deviceOrientation：方向傳感器數據的事件，可以獲取手機靜止狀態下的方向數據（手機所處的角度、方位和朝向等）。

事件2：deviceMotion：運動傳感器的事件，可以獲取手機運動狀態下的運動加速度等數據。

屬性 1：accelerationIncludingGravity(含重力的加速度)

屬性 2：acceleration(排除重力影響的加速度)

實現搖一搖案例代碼：

//判斷瀏覽器是否支持 DeviceMotionEvent

if (window.DeviceMotionEvent) {

//注冊事件devicemotion監聽器

window.addEventListener('devicemotion',deviceMotionHandler, false);

}

else{

alert('你的瀏覽器不支持devicemotion特性');

}

var SHAKE_THRESHOLD = 800;

// 定義一個變量保存上次搖動的時間

var last_update = 0;

var x, y, z, last_x, last_y, last_z;

function deviceMotionHandler(eventData) {

// 首先，定義一個搖動的閥值 重力加速度

var acceleration =eventData.accelerationIncludingGravity;

//當前時間

var curTime = new Date().getTime();

//當前搖一搖時間和上一次的時間差

if ((curTime - last_update)> 300) {

var diffTime = curTime -last_update;

last_update = curTime;

x = acceleration.x;

y = acceleration.y;

z = acceleration.z;

//獲取這次搖一搖的速度

var speed = Math.abs(x +y + z - last_x - last_y - last_z) / diffTime * 10000;

if (speed > SHAKE_THRESHOLD) {

alert("你搖動了手機！");

}

last_x = x;

last_y = y;

last_z = z;

}

}

Demo案例地址（點擊閱讀原文）

總結

以上是生活随笔為你收集整理的HTML5 API详解（4）:最实用的API DeviceOrientation设备传感器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。