HTML5 DeviceOrientation implementiert den Shake-Funktionscode für mobile Websites example_html5 Tutorial-Fähigkeiten

<script><br>// DeviceOrientation bietet eine Kapselung auf hoher Ebene des zugrunde liegenden Richtungssensors und Bewegungssensors und bietet Unterstützung für DOM-Ereignisse. <br>// Diese Funktion umfasst zwei Ereignisse: <br>// 1. deviceOrientation: ein Ereignis, das die Orientierungssensordaten kapselt, das die Orientierungsdaten des Mobiltelefons erhalten kann, wenn es stationär ist (Winkel, Ausrichtung und Ausrichtung). des Mobiltelefons usw.). <br>// 2. deviceMotion: Kapselt die Ereignisse des Bewegungssensors und kann Daten wie die Bewegungsbeschleunigung abrufen, wenn das Mobiltelefon in Bewegung ist. <br>// Mit diesen beiden Ereignissen können Sie auf einfache Weise interessante Funktionen wie Schwerkraftmessung und Kompass implementieren. </p> <p>// Jetzt gibt es in vielen nativen Anwendungen eine sehr verbreitete und modische Funktion: Schütteln, um Leute zu finden, Schütteln, um Nachrichten zu lesen, Schütteln, um Goldmünzen zu finden. . . <br>// Vielleicht kennen Sie diese Funktion bereits sehr gut auf dem Android- oder iOS-Client, aber jetzt erzähle ich Ihnen, wie Sie die Shake-Funktion auf der mobilen Webseite implementieren. </p> <p>// OK, fangen wir jetzt an, hehe~<br>// Lassen Sie uns zunächst die Bewegungsereignisse des Geräts verstehen – DeviceMotionEvent: Gibt die relevanten Informationen zur Beschleunigung und Drehung des Geräts zurück, wobei die Beschleunigungsdaten Folgendes umfassen: Die folgenden drei Richtungen: <br>// x: horizontal über den Telefonbildschirm; <br>// y: vertikal über den Telefonbildschirm; <br>// z: vertikal über den Telefonbildschirm. <br>// Angesichts der Tatsache, dass einige Geräte den Einfluss der Schwerkraft nicht ausschließen, gibt dieses Ereignis zwei Attribute zurück: <br>// 1. BeschleunigungEinschließlichGravity (Beschleunigung einschließlich Schwerkraft) <br>// 2. Beschleunigung ( ohne den Einfluss der Schwerkraft) Beschleunigung)</p> <p>// Als Programmierer ist der direkteste Weg, zu programmieren. </p> <p>//Achten Sie zunächst auf Bewegungserkennungsereignisse auf der Seite<br>function init(){<br>　if (window.DeviceMotionEvent) {<br>　 // Mobile Browser unterstützen Bewegungserkennungsereignisse<br> Fenster. addEventListener('devicemotion', deviceMotionHandler, false);<br>　$("#yaoyiyaoyes").show();<br>　} else{<br>　　 // Mobile Browser unterstützen keine Bewegungserkennungsereignisse<br>　　$( "#yaoyiyaono").show();<br>　} <br>}</p> <p>// Wie berechnen wir also, ob der Benutzer das Telefon schüttelt? Sie können die folgenden Punkte berücksichtigen: <br>// 1. Wenn Benutzer ihre Telefone schütteln, bewegen sie sich tatsächlich immer in eine Richtung. <br>// 2. Wenn Benutzer ihre Telefone schütteln, bewegen sie sich in x entsprechende Geschwindigkeitsänderungen in den drei Richtungen y und z sein; <br>// 3. Das normale Bewegungsverhalten des Mobiltelefons kann nicht als Zittern angesehen werden (das Telefon wird in die Tasche gesteckt, und die Beschleunigung ändert sich auch, wenn). gehen) ). <br>// Berechnen Sie unter Berücksichtigung der oben genannten drei Punkte die Beschleunigung in den drei Richtungen, messen Sie sie in Intervallen, untersuchen Sie ihre Änderungsrate in einem festgelegten Zeitraum und bestimmen Sie einen Schwellenwert, um den Vorgang nach dem Schütteln auszulösen. </p> <p>// Definieren Sie zunächst einen Erschütterungsschwellenwert <br>var SHAKE_THRESHOLD = 3000;<br>// Definieren Sie eine Variable, um die Zeit der letzten Aktualisierung zu speichern <br>var last_update = 0;<br>// Eng Definieren Sie dann x, y, z, um die Daten der drei Achsen und den Zeitpunkt der letzten Abfahrt aufzuzeichnen <br>var x;<br>var y;<br>var z;<br>var last_x;<br>var last_y;<br>var last_z;</p> <p>//Um dieses Beispiel etwas langweiliger und interessanter zu machen, fügen Sie einen Zähler hinzu <br>var count = 0;</p> <p>function deviceMotionHandler(eventData) {<br>　 // Beschleunigung einschließlich Schwerkraft abrufen <br> var Beschleunigung = eventData.accelerationIncreasingGravity; <p> // Aktuelle Uhrzeit abrufen <br> var curTime = new Date().getTime(); <br> var diffTime = curTime -last_update;<br> // Fester Zeitraum <br> if (diffTime &gt ; 100) {<br>　last_update = curTime </p> <p>　x = beschleunigung.x <br>　y = beschleunigung.y <br>　z = beschleunigung.z; <p> var speed = Math.abs(x y z - last_x - last_y - last_z) / diffTime * 10000; <p>　 if (speed > SHAKE_THRESHOLD) { <br>　　　 // TODO: Hier können Sie die Datenlogikoperationen implementieren, die nach dem Schütteln ausgeführt werden sollen <br> Count ;<br>　　$("#yaoyiyaoyes"). );<br> }</p> <p>　 last_x = x; <br> last_y = y; <br> last_z = z;="font-size:20px;line-height:35px;display:none;"> Bruder, wenn du mich siehst, bedeutet das, dass du es noch nicht abschütteln kannst, aber es bedeutet nicht, dass du nicht qualifiziert bist, mich zu benutzen, stattdessen: </br><br>1. Wenn Sie einen PC-Browser verwenden, ist das falsch. </br><br> 2. Wenn Sie ein Android-Telefon verwenden, muss ich Ihnen leider mitteilen, dass Android mitgeliefert wird Verlassen Sie mich, Sie können Browser von Drittanbietern wie UCWeb und Chrome verwenden. </br><br> 3. Wenn Sie nicht in die beiden oben genannten Situationen geraten, kann ich Ihnen nur sagen: Sie müssen Ihr Mobiltelefon wechseln Telefon! ! ! </br><br></div><br><div id="yaoyiyaoyes" style="font-size:20px;margin:10px;line-height:50px;display:none;"> <br>Bruder, schüttel eins, vielleicht wartet ein reines Mädchen auf dich!<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>