HTML5 DeviceOrientation은 모바일 웹사이트 흔들기 기능 코드 example_html5 튜토리얼 기술을 구현합니다.

소개 전에 두 가지 진술을 하세요.

다음 코드는 직접 실행할 수 있습니다. 물론 jQuery를 인용하는 것을 잊지 마세요.

코드 복사

코드는 다음과 같습니다.

<script><br />// DeviceOrientation은 기본 방향 센서와 동작 센서를 높은 수준으로 캡슐화하여 DOM 이벤트를 지원합니다. <br />// 이 기능에는 두 가지 이벤트가 포함됩니다. <br />// 1. deviceOrientation: 방향 센서 데이터를 캡슐화하는 이벤트로 휴대폰이 정지되어 있을 때 방향 데이터(각도, 방향, 방향)를 얻을 수 있습니다. 휴대폰 등). <br />// 2. deviceMotion: 모션 센서의 이벤트를 캡슐화하여 휴대폰이 움직일 때 모션 가속도와 같은 데이터를 얻을 수 있습니다. <br />// 이 두 가지 이벤트를 사용하면 중력 감지, 나침반 등 흥미로운 기능을 쉽게 구현할 수 있습니다. <p>// 이제 많은 기본 애플리케이션에는 매우 일반적이고 세련된 기능이 있습니다. 흔들어서 사람을 찾고, 흔들어서 뉴스를 읽고, 흔들어서 금화를 찾으세요. . . <br />// 안드로이드나 iOS 클라이언트에서는 이미 이 기능을 잘 알고 계시겠지만, 이제 모바일 웹페이지에서 흔들기 기능을 구현하는 방법을 알려드리겠습니다. <p>// 자, 이제 시작해 보겠습니다 ㅎㅎ~<br />// 먼저 기기 모션 이벤트를 이해해 보겠습니다.——DeviceMotionEvent: 기기의 가속 및 회전에 대한 관련 정보를 반환합니다. 가속도 데이터에는 다음 세 가지가 포함됩니다. 방향: <br />// x: 전화기 화면을 가로로 가로질러; <br />// y: 전화기 화면을 세로로 가로질러 <br />// z: 전화기 화면을 세로로 가로질러; <… 중력의 영향 제외) 가속도) <p>// 코더로서 가장 직접적인 방법은 코딩을 시작하는 것입니다. <p>//먼저 페이지에서 모션 감지 이벤트를 수신합니다<br />function init(){<br />　if (window.DeviceMotionEvent) {<br />　 // 모바일 브라우저는 모션 감지 이벤트를 지원합니다<br /> 창. addEventListener('devicemotion', deviceMotionHandler, false);<br />　$("#yaoyiyaoyes").show();<br />　} else{<br />　　 // 모바일 브라우저는 모션 감지 이벤트를 지원하지 않습니다<br />　　$( "#yaoyiyaono").show();<br />　} <br />} <p>// 그렇다면 사용자가 휴대전화를 흔들고 있는지 어떻게 계산하나요? 다음 사항을 고려해 볼 수 있습니다. <br />// 1. 실제로 사용자가 휴대폰을 흔들면 항상 한 방향으로 흔들립니다. <br />// 2. 사용자가 휴대폰을 흔들면 x 방향으로 움직입니다. y와 z 세 방향의 속도 변화에 대응합니다. <br />// 3. 사용자의 일반적인 휴대폰 움직임 동작은 흔들리는 것으로 간주할 수 없습니다. 휴대폰을 주머니에 넣었을 때 가속도도 변경됩니다. 걷는) ). <br />// 위의 세 가지 사항을 고려하여 세 방향의 가속도를 계산하고 간격을 두고 측정하여 일정 시간 동안의 변화율을 조사하고 흔들기 후 작동을 시작하는 임계값을 결정합니다. <p>// 먼저 흔들림 임계값을 정의합니다 <br />var SHAKE_THRESHOLD = 3000;<br />// 마지막 업데이트 시간을 저장하는 변수를 정의합니다 <br />var last_update = 0;<br />// 꽉 그런 다음 x, y, z를 정의하여 세 축의 데이터와 마지막 출발 시간을 기록합니다. <br />var x;<br />var y;<br />var z;<br />var last_x;<br />var last_y;<br />var last_z; <p>//이 예제를 좀 더 지루하고 흥미롭게 만들기 위해 카운터 <br />var count = 0;를 추가하세요. <p>function deviceMotionHandler(eventData) {<br />　 // 중력을 포함한 가속도 가져오기 <br /> var Acceleration = eventData.accelerationInclusiveGravity <p> // 현재 시간 가져오기 <br /> var curTime = new Date().getTime(); <br /> var diffTime = curTime -last_update;<br /> // 고정 기간 <br /> if (diffTime &gt ; 100) {<br />　last_update = curTime <p>　 x = 가속도.x; <br />　y = 가속도.y <br />　z = 가속도.z; <p> var 속도 = Math.abs(x y z - last_x - last_y - last_z) / diffTime * 10000; <p>　 if (speed > SHAKE_THRESHOLD) { <br />　　　 // TODO: 여기에서 <br /> Count ;<br />　　$("#yaoyiyaoyes")를 흔들고 수행할 데이터 논리 작업을 구현할 수 있습니다. );<br /> } <p>　 last_x = x; <br /> last_y = y; <br /> last_z = z; ="font-size:20px;margin:10px;line-height:35px;display:none;"><br /> 형님, 저를 본다면 아직 흔들릴 수 없다는 뜻이지, 저를 사용할 자격이 없다는 뜻은 아닙니다. <br />1. PC 브라우저를 사용하신다면 그건 아닙니다. <br /> 2. 안드로이드 폰을 사용하신다면 안타깝지만, 안드로이드는 브라우저와 함께 제공됩니다. 나를 버리면 UCWeb 및 Chrome과 같은 타사 브라우저를 사용할 수 있습니다. <br /> 3. 위의 두 가지 상황에 해당되지 않으면 모바일을 변경해야 합니다. 핸드폰! ! ! <br /></script>

형님, 하나 흔들어 보세요. 어쩌면 순수한 소녀가 당신을 기다리고 있을지도 모릅니다!

<script><br />$(document).ready(function(){<br />init();<br /> });<br /></script>