HTML5 DeviceOrientation によるモバイル Web サイトのシェイク関数コードの実装 example_html5 チュートリアル スキル

導入の前に 2 つのステートメントを作成します:

次のコードは直接実行できます。もちろん、jQuery を引用することを忘れないでください。

コードをコピーします

コードは次のとおりです:

<script><br>// DeviceOrientation は、基礎となる方向センサーとモーション センサーの高レベルのカプセル化を提供し、DOM イベントのサポートを提供します。 <br>// この機能には 2 つのイベントが含まれます: <br>// 1. deviceOrientation: 方向センサー データをカプセル化するイベント。これにより、携帯電話が静止しているときの方向データ (角度、方向、方位) を取得できます。携帯電話など）。 <br>// 2. deviceMotion: モーションセンサーのイベントをカプセル化し、携帯電話が動いているときにモーション加速度などのデータを取得できます。 <br>// これら 2 つのイベントを使用すると、重力感知やコンパスなどの興味深い機能を簡単に実装できます。 </p> <p>// 多くのネイティブ アプリケーションには、非常に一般的でファッショナブルな機能があります。シェイクして人を見つけたり、シェイクしてニュースを読んだり、シェイクして金貨を見つけたりすることができます。 。 。 <br>// Android または iOS クライアントではこの機能をすでによくご存知かと思いますが、ここでは、モバイル Web ページにシェイク機能を実装する方法を説明します。 </p> <p>// OK、それでは始めましょう、へへ~<br>// まずデバイスのモーション イベントを理解しましょう—DeviceMotionEvent: デバイスの加速と回転に関する関連情報を返します。加速データには次の 3 つが含まれます。方向: <br>// x: 電話画面の水平方向、<br>// y: 電話画面の垂直方向、<br>// z: 電話画面の垂直方向。 <br>// 一部のデバイスは重力の影響を排除できないという事実を考慮して、このイベントは 2 つの属性を返します: <br>// 1.加速度を含む重力 (重力を含む加速度) <br>// 2.加速度 (重力の影響を除く）加速度）</p> <p>// プログラマーとして最も直接的な方法は、コーディングを始めることです。 </p> <p>//まず、ページ上のモーション センシング イベントをリッスンします<br>function init(){<br> if (window.DeviceMotionEvent) {<br> // モバイル ブラウザはモーション センシング イベントをサポートしています<br> window。 addEventListener('devicemotion', deviceMotionHandler, false);<br> $("#yaoyiyaoyes").show();<br> } else{<br> // モバイルブラウザはモーションセンシングイベントをサポートしていません<br> $( "#yaoyiyaono").show();<br> } <br>}</p> <p>// それでは、ユーザーが電話を振っているかどうかをどのように計算するのでしょうか?次の点を考慮できます。 <br>// 1. 実際、ユーザーが携帯電話を振ると、常に一方向に震えます。 <br>// 2. ユーザーが携帯電話を振ると、x 方向に移動します。 y と z の 3 方向の速度の変化に対応する; <br>// 3. ユーザーの通常の携帯電話の移動動作は揺れとはみなされません (携帯電話はポケットに入れられており、加速度も変化します)歩く））。 <br>// 上記 3 点を考慮して、3 方向の加速度を計算し、一定時間ごとに測定し、一定時間内の変化率を調べ、振った後の動作を開始する閾値を決定します。 </p> <p>// まず、揺れのしきい値を定義します <br>var SHAKE_THRESHOLD = 3000;<br>// 最終更新時間を保存する変数を定義します <br>var last_update = 0;<br>// タイト次に、3 つの軸のデータと最後の出発時刻を記録する 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> <p>//この例をもう少し退屈で興味深いものにするために、カウンター <br>var count = 0; を追加します。 <p>function deviceMotionHandler(eventData) {<br> // 重力を含む加速度を取得 <br> var加速度 =eventData.accelerationincludeGravity </p> <p> // 現在時刻を取得します <br> var curTime = new Date().getTime(); <br> var diffTime = curTime -last_update;<br> // 固定期間 <br> if (diffTime &gt) ; 100) {<br>; last_update = curTime; <p> x = 加速度.x; <br> y = 加速度.z; <p> var 速度 = Math.abs(x y z - last_x - last_y - last_z) / diffTime * 10000; <p> if (speed > SHAKE_THRESHOLD) { <br> // TODO: ここでは、<br> Count ;<br> $("#yaoyiyaoyes") を振った後に実行されるデータ ロジック操作を実装できます。 );<br> }</p> <p> <br> last_y = y; <br> last_z = z; ="font-size:20px;margin:10px;display:none;">兄弟、私を見たら、それはあなたがまだそれを揺るがすことができないことを意味しますが、それはあなたが私を使う資格がないことを意味するのではなく、代わりに: </br><br>1. PC ブラウザを使用している場合、それは間違いです。私はモバイル ブラウザのみを好みます。<br> 2. Android スマートフォンを使用している場合は、申し訳ありませんが、Android にはブラウザが付属しています。私を放棄しました。UCWeb や Chrome などのサードパーティのブラウザを使用できます。<br> 3. 上記 2 つの状況に当てはまらない場合は、携帯電話を変更する必要があるとしか言えません。電話！ ！ ！ </br><br></div><br><div id="yaoyiyaoyes" style="font-size:20px;margin:10px;line-height:50px;display:none;"> <br>お兄さん、振ってみてください、もしかしたら純粋な女の子があなたを待っているかもしれません!<br></div><br><div id="yaoyiyaoresult" style="font-size:20px;margin :10px ;line-height:50px;display:none;"></div><br><script><br>$(document).ready(function(){<br>init();<br> });<br></script>