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

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

php中世界最好的语言オリジナル: 2017-12-04 11:15:103890ブラウズ

今日は、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中国語ウェブサイトその他関連記事に注目してください。