휴대폰 흔들기 기능 구현을 위한 H5 단계-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

휴대폰 흔들기 기능 구현을 위한 H5 단계

php中世界最好的语言

Dec 04, 2017 am 11:15 AM

html5 성취하다 단계

오늘은 HTML5를 사용하여 웹페이지에 아주 멋진 기능을 구현하는 방법을 가르쳐 드리겠습니다. 휴대폰을 흔들어 보세요. 이전에 모바일 개발을 해본 적이 있다면 이러한 기능에 매우 익숙할 것입니다. 하지만 아래에서는 이 기능을 웹에서 처음으로 구현해 보겠습니다.

OrientationEventdeviceorientation

기기 방향이 변경되면 이 이벤트가 발생합니다. 사용 방법은 다음과 같습니다.

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

콜백 함수orientationHandler가 수신합니다. 다음 정보를 포함하는 DeviceOrientationEvent 유형 매개변수입니다.

Attribute이름 설명

absolute 방향 데이터가 지구 좌표계 및 장치 좌표계와 다르면 true

alpha 장치의 회전 각도 알파 방향, 범위 0- 360

beta 베타 방향의 장치 회전 각도, 범위는 -180-180

gamma 감마 방향의 장치 회전 각도, 범위는 다음과 같습니다. -90-90

Motion 이벤트 devicemotion

이 이벤트는 장치 위치에서 발생합니다. 변경이 있을 때 트리거됩니다.

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

이 콜백 함수는 DeviceMotionEvent 유형을 허용합니다. 다음 정보를 포함한 매개변수입니다.

속성 이름 설명

X, Y, Z의 가속 장치 중력 가속도를 상쇄하기 위해 축 방향으로 이동한 거리

accelerationIncludeGravity 장치가 3축 방향으로 이동한 거리 중력 가속도를 포함한 X, Y, Z의 회전율

rotationRate 알파, 베타, 감마

의 세 방향에서 장치의 회전 각도

간격은 장치에서 데이터를 얻는 빈도(밀리초 단위)

코드입니다. part

<!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 중국어 웹사이트Other