Html5 JS는 휴대폰 흔들기 기능을 구현합니다._html5 튜토리얼 기술

HTML5의 중요한 기능은 기본 방향 센서와 모션 센서를 높은 수준으로 캡슐화하고 DOM 이벤트를 지원하는 DeviceOrientation입니다. 이 기능에는 두 가지 유형의 이벤트가 포함됩니다.

1. deviceOrientation: 방향 센서 데이터를 캡슐화하고 휴대폰의 각도, 방향, 방향 등 휴대폰이 정지되어 있을 때의 방향 데이터를 얻을 수 있는 이벤트입니다.

2. deviceMotion: 모션 센서 데이터를 캡슐화하는 이벤트로, 휴대폰이 움직일 때 모션 가속도와 같은 데이터를 얻을 수 있습니다. 이를 사용하면 중력 감지, 나침반과 같은 흥미로운 기능을 쉽게 구현할 수 있으며 이는 휴대폰에서 매우 유용할 것입니다. 예를 들어 Opera H5 평가판의 중력 감지 공 예제는 DeviceOrientation API의 deviceOrientation 이벤트를 수신하여 구현됩니다. 실제로 이는 웹상의 모바일 애플리케이션에서 매우 일반적이고 유행하는 기능인 전화 흔들기 기능을 구현하는 데에도 도움이 될 수 있습니다.

DeviceMotionEvent(기기 모션 이벤트)는 기기의 가속 및 회전에 대한 정보를 반환합니다. 가속도 데이터에는 x, y 및 z의 3개 축이 포함됩니다. (아래 그림에 표시된 것처럼 x축은 휴대폰 화면이나 노트북 키보드를 통해 수평으로 실행되고, y축은 휴대폰 화면이나 노트북 키보드를 통해 수직으로 실행됩니다. , z축은 휴대폰 화면이나 노트북 키보드에 수직입니다. 일부 장치에는 중력의 영향을 제외하는 하드웨어가 없을 수 있으므로 이 이벤트는 AccelerationIncludeGravity(중력을 포함한 가속도)와 Acceleration(가속도)의 두 가지 속성을 반환합니다. 후자는 중력의 영향을 제외합니다.

1. [코드] 모션 감지 이벤트 듣기
2. [코드] 중력을 포함한 가속도 획득
3. 핵심 메소드 구현 코드

HTML5의 중요한 기능은 기본 방향 센서와 모션 센서를 높은 수준으로 캡슐화하고 DOM 이벤트를 지원하는 DeviceOrientation입니다. 이 기능에는 두 가지 유형의 이벤트가 포함됩니다.

1. deviceOrientation: 방향 센서 데이터를 캡슐화하고 휴대폰의 각도, 방향, 방향 등 휴대폰이 정지되어 있을 때의 방향 데이터를 얻을 수 있는 이벤트입니다.

2. deviceMotion: 모션 센서 데이터를 캡슐화하는 이벤트로, 휴대폰이 움직일 때 모션 가속도와 같은 데이터를 얻을 수 있습니다.
이를 사용하면 중력 감지, 나침반과 같은 흥미로운 기능을 쉽게 구현할 수 있어 휴대폰에서 매우 유용할 것입니다. 예를 들어 Opera H5 평가판의 중력 센서 공 예제는 DeviceOrientation
API의 deviceOrientation 이벤트를 수신하여 구현됩니다.

실제로 웹 모바일 애플리케이션에서 매우 일반적이고 세련된 기능인 전화 흔들기 기능을 구현하는 데에도 도움이 될 수 있습니다.

DeviceMotionEvent(기기 모션 이벤트)는 기기의 가속 및 회전에 대한 정보를 반환합니다. 가속도 데이터에는 x, y 및 z의 3개 축이 포함됩니다. (아래 그림에 표시된 것처럼 x축은 휴대폰 화면이나 노트북 키보드를 통해 수평으로 실행되고, y축은 휴대폰 화면이나 노트북 키보드를 통해 수직으로 실행됩니다. , z축은 휴대폰 화면이나 노트북 키보드에 수직입니다. 일부 장치에는 중력의 영향을 제외하는 하드웨어가 없을 수 있으므로 이 이벤트는 AccelerationIncludeGravity(중력을 포함한 가속도)와 Acceleration(가속도)의 두 가지 속성을 반환합니다. 후자는 중력의 영향을 제외합니다.

1. [코드] 모션 감지 이벤트 듣기

코드 복사

코드는 다음과 같습니다. 다음:

if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion',deviceMotionHandler, false);
}

2. 코드] 중력가속도가 포함된 콘텐츠 가져오기

코드 복사

코드는 다음과 같습니다

function deviceMotionHandler(eventData) {
var Acceleration =eventData.accelerationInclusiveGravity;
}

3. [코드] 핵심 메소드 구현 코드

코드 복사

코드는 다음과 같습니다.

var SHAKE_THRESHOLD = xxx;
var last_update = 0;
var x, y, z, last_x, last_y, last_z;

function deviceMotionHandler(eventData) {
var Acceleration =eventData.accelerationInclusiveGravity;

var curTime = newDate().getTime();

if ((curTime – lastUpdate)> 100) {

var diffTime = curTime -last_update;
last_update = curTime;

x = 가속도.x;
y = 가속도.y;
z = 가속도.z;

var 속도 = Math.abs(x y z – last_x – last_y – last_z) / diffTime * 10000;

if (속도 > SHAKE_THRESHOLD) {
alert(“흔들었습니다!”);
}
last_x = x;
last_y = y;
last_z = z;
}
}