휴대폰 흔들기 기능 구현을 위한 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

관련 기사

html5的div一行可以放两个吗Apr 25, 2022 pm 05:32 PM

html5的div元素默认一行不可以放两个。div是一个块级元素，一个元素会独占一行，两个div默认无法在同一行显示；但可以通过给div元素添加“display：inline;”样式，将其转为行内元素，就可以实现多个div在同一行显示了。

html5中列表和表格的区别是什么Apr 28, 2022 pm 01:58 PM

html5中列表和表格的区别：1、表格主要是用于显示数据的，而列表主要是用于给数据进行布局；2、表格是使用table标签配合tr、td、th等标签进行定义的，列表是利用li标签配合ol、ul等标签进行定义的。

html5怎么让头和尾固定不动Apr 25, 2022 pm 02:30 PM

固定方法：1、使用header标签定义文档头部内容，并添加“position:fixed;top:0;”样式让其固定不动；2、使用footer标签定义尾部内容，并添加“position: fixed;bottom: 0;”样式让其固定不动。

html5中不支持的标签有哪些Mar 17, 2022 pm 05:43 PM

html5中不支持的标签有：1、acronym，用于定义首字母缩写，可用abbr替代；2、basefont，可利用css样式替代；3、applet，可用object替代；4、dir，定义目录列表，可用ul替代；5、big，定义大号文本等等。

HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制，它只是一个矩形的图形容器，绘制图形必须通过脚本（通常是JavaScript）来完成；开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表，一般和li标签配合使用，在dir标签对中通过li标签来设置列表项，语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir，可使用ul标签取代。

Html5怎么取消td边框May 18, 2022 pm 06:57 PM

3种取消方法：1、给td元素添加“border:none”无边框样式即可，语法“td{border:none}”。2、给td元素添加“border:0”样式，语法“td{border:0;}”，将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式，语法“td{border:transparent;}”，将td边框的颜色设置为透明即可。