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

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

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

코드 복사

코드는 다음과 같습니다.

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