介紹之前做兩個聲明：
以下程式碼可以直接運行，當然你別忘了引用jQuery才行。
<script><br />// DeviceOrientation將底層的方向感測器和運動感測器進行了進階封裝，提供了DOM事件的支援。 <br />// 這個特性包括兩個事件：<br />// 1、deviceOrientation：封裝了方向感測器資料的事件，可以取得手機靜止狀態下的方向資料（手機所處的角度、方位和朝向等） 。 <br />// 2、deviceMotion：封裝了運動感測器的事件，可以取得手機運動狀態下的運動加速度等資料。 <br />// 使用這兩個事件，可以很能夠實現重力感應、指南針等有趣的功能。
<p>// 現在在許多Native應用程式中有一個非常常見而時尚的功能 —— 搖一搖，搖一搖找人、搖一搖看新聞、搖一搖找金幣。 。 。 <br />// 也許在android或ios的客戶端上對這個功能你已經很了解了，但是現在，我將告訴你如何在手機網頁上實現搖一搖的功能。
<p>// OK，那我們現在就開始吧，嘿嘿~<br />// 先來讓我們了解一下設備運動事件—— DeviceMotionEvent:返回設備關於加速度和旋轉的相關信息，其中加速度的數據包含以下三個方向：<br />// x：橫向貫穿手機螢幕；<br />// y：縱向貫穿手機螢幕；<br />// z：垂直手機螢幕。 <br />// 鑑於有些裝置沒有排除重力的影響，所以事件會傳回兩個屬性：<br />// 1、accelerationIncludingGravity(含重力的加速度)<br />// 2、acceleration(排除重力影響的加速度)
<p>// 身為碼農，上碼是最直接的，come on，代號走起！
<p>// 首先在頁面上要監聽運動傳感事件<br />function init(){<br /> if (window.DeviceMotionEvent) {<br /> // 移動瀏覽器支持運動傳感事件<br /> window 。 $("#yaoyiyaono").show();<br /> } <br />}
<p>// 那麼，我們要如何計算使用者是否是在搖動手機呢？可以從以下幾點考慮：<br />// 1、其實用戶在搖動手機的時候始終都是以一個方向為主進行搖動的；<br />// 2、用戶在搖動手機的時候在x、 y、z三個方向都會有相應的想速度的變化；<br />// 3、不能把用戶正常的手機運動行為當做搖一搖（手機放在兜裡，走路的時候也會有加速度的變化）。 <br />// 從以上三點考慮，針對三個方向上的加速度進行計算，間隔測量他們，考察他們在固定時間段裡的變化率，而且需要確定一個閥值來觸發搖一搖之後的操作。
<p>// 首先，定義一個搖晃的閥值<br />var SHAKE_THRESHOLD = 3000;<br />// 定義一個變數保存的時間<br />var last_update = 0;<br />// 緊接著定義x、y、z記錄三個軸的資料以及上一次出發的時間<br />var x;<br />var y;<br />var z;<br />var last_x;<br />var last_y;<br />var last_z;
<p>// 為了增加這個例子的一點無聊趣味性，增加一個計數器<br />var count = 0;
<p>function deviceMotionHandler(eventData) {<br /> // 取得含重力的加速度<br /> var acceleration = eventData.accelerationIncludingGravity;
<p> // 取得目前時間<br /> var curTime = new Date().getTime(); <br /> var diffTime = curTime -last_update;<br /> /// 固定時間段<br /> {<br /> last_update = curTime;
<p> x = acceleration.x; <br /> y = acceleration.y; <br /> z = acceleration.y; < > z = acceleration.z; >
<p> var speed = Math.abs(x y z - last_x - last_y - last_z) / diffTime * 10000;
<p> if (speed > SHAKE_THRESHOLD) { <br /> // TODO:在此處可以實現搖 、 $("#yaoyiyaoyes").hide( );<br /> $("#yaoyiyaoresult").show();<br /> $("#yaoyiyaoresult")。 /p>
<p> last_x = x; <br /> last_y = y; <br /> last_z = z; <br /> } <="} <) <br />="<o }<="> <<3] <o<at; <m<; <<a;<3] <o<; -size:20px;margin:10px;line-height:35px;display:none;"><br /> 兄弟，如果您看到了我，說明您現在還不能搖，不是說您沒有資格用我，而是： <br />1.如果您使用PC機的瀏覽器，那可就不對了，我只愛手機瀏覽器；<br /> 2、如果您是Android手機，那不好意思告訴你，android自帶的瀏覽器拋棄了我，您可以用UCWeb、chrome等第三方瀏覽器；<br /> 3、如果您都不屬於以上兩種情況，那我只有告訴您：您改換手機啦！ ！ ！ <br /></script>
兄弟兄弟，搖一個吧，說不定有個清純的妹子等著你呢!
<script><br />$(document).ready(function(){<br />init();<br />});<br />< /script><br /></script>
