ホームページ > ウェブフロントエンド > htmlチュートリアル > 携帯電話のシェイク機能を実装するための H5 ステップ

携帯電話のシェイク機能を実装するための H5 ステップ

php中世界最好的语言
リリース: 2017-12-04 11:15:10
オリジナル
3904 人が閲覧しました

今日は、HTML5 を使用して、携帯電話を振るだけで非常に優れた機能を Web ページに実装する方法を説明します。以前にモバイル開発を行ったことがある場合は、そのような機能に精通しているかもしれません。ただし、以下では、この機能を Web 上で初めて実装します。

OrientationEventdeviceorientation

このイベントは、デバイスの向きが変化したときにトリガーされます。使用方法は次のとおりです。

window.addEventListener('deviceorientation', OrientationHandler, true);

Callback関数orientationHandlerが受け取ります。 DeviceOrientationEvent 次の情報を含むタイプのパラメーター。

属性名前の説明

absolute 方向データが地球座標系とデバイス座標系と異なる場合は true

alpha デバイスの回転角度アルファ方向、範囲は 0-360

beta ベータ方向のデバイスの回転角度、範囲は -180-180

gamma ガンマ方向のデバイスの回転角度、範囲は-90-90

モーション イベント devicemotion

このイベントはデバイスの位置で発生します変更があるときにトリガーされます

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

このコールバック関数は DeviceMotionEvent タイプを受け入れます以下の情報を含むパラメータ。

属性名の説明

X、Y、Z の加速デバイス重力加速度を相殺するために軸方向に移動した距離

accelerationincludeGravity デバイスが 3 つの軸方向に移動した距離重力加速度を含む X、Y、Z の角度

rotationRate アルファ、ベータ、ガンマの 3 方向におけるデバイスの回転角度

間隔はデバイスからデータを取得する頻度、単位はミリ秒です

コード部分

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>摇一摇</title>
</head>
<body>
  <p>
    摇一摇
  </p>
  <script>
    const SHAKE_SPEED = 300;
    let lastTime = 0;//上次变化的时间
    let x = y = z = lastX = lastY = lastZ = 0;//位置变量初始化
 
    function  motionHandler(event) {
      let acceleration = event.accelerationIncludingGravity;
      let curTime = Date.now();//取得当前时间
      if ((curTime - lastTime) > 120) {
        let diffTime = curTime - lastTime;
        lastTime = curTime;
        x = acceleration.x;
        y = acceleration.y;
        z = acceleration.z;
        //计算摇动速度
        let speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 1000;
        if (speed > SHAKE_SPEED) {
          alert("你摇动了手机");
        }
        lastX = x;
        lastY = y;
        lastZ = z;
      }
    }
    if(window.DeviceMotionEvent) {
      window.addEventListener(&#39;devicemotion&#39;, motionHandler, false);
    } else {
      alert("你的设备不支持位置感应");
    }
  </script>
</body>
</html>
ログイン後にコピー


これらの事例を読んだ後、あなたは方法をマスターしたと思います。さらにエキサイティングなコンテンツについては、php中国語ウェブサイトその他関連記事に注目してください。

関連書籍:

HTML5 で DOM プログラミングを実装する手順

HTML でイベントを使用する方法

キャンバスを使用して時計の実装手順を作成する

以上が携帯電話のシェイク機能を実装するための H5 ステップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート