HTML5 DeviceOrientation implémente le code de fonction de tremblement de site Web mobile example_html5 compétences du didacticiel

Faites deux déclarations avant l'introduction :

Le code suivant peut être exécuté directement. Bien sûr, n'oubliez pas de citer jQuery.

Copier le code

Le code est le suivant :

<script><br>// DeviceOrientation fournit une encapsulation de haut niveau du capteur de direction et du capteur de mouvement sous-jacents, fournissant ainsi la prise en charge des événements DOM. <br>// Cette fonctionnalité comprend deux événements : <br>// 1. deviceOrientation : un événement qui encapsule les données du capteur d'orientation, qui permet d'obtenir les données d'orientation du téléphone mobile lorsqu'il est à l'arrêt (l'angle, l'orientation et l'orientation du téléphone portable, etc.) . <br>// 2. deviceMotion : encapsule les événements du capteur de mouvement et peut obtenir des données telles que l'accélération du mouvement lorsque le téléphone mobile est en mouvement. <br>// Grâce à ces deux événements, vous pouvez facilement implémenter des fonctions intéressantes telles que la détection de gravité et la boussole. </p> <p>// Il existe désormais une fonction très courante et à la mode dans de nombreuses applications natives : secouer pour trouver des personnes, secouer pour lire des nouvelles, secouer pour trouver des pièces d'or. . . <br>// Peut-être connaissez-vous déjà très bien cette fonction sur le client Android ou iOS, mais maintenant, je vais vous expliquer comment implémenter la fonction shake sur la page web mobile. </p> <p>// OK, commençons maintenant, hehe~<br>// Comprenons d'abord les événements de mouvement de l'appareil ——DeviceMotionEvent : renvoie les informations pertinentes sur l'accélération et la rotation de l'appareil, où les données d'accélération incluent les trois suivants directions : <br>// x : horizontalement sur l'écran du téléphone ; <br>// y : verticalement sur l'écran du téléphone ; <br>// z : verticalement sur l'écran du téléphone. <br>// Compte tenu du fait que certains appareils n'excluent pas l'influence de la gravité, cet événement renverra deux attributs : <br>// 1. accélérationIncludingGravity (accélération incluant la gravité) <br>// 2. accélération ( à l'exclusion de l'influence de la gravité) Accélération)</p> <p>// En tant que codeur, le moyen le plus direct est de coder. Allez, commencez à coder ! </p> <p>//Tout d'abord, écoutez les événements de détection de mouvement sur la page<br>function init(){<br>　if (window.DeviceMotionEvent) {<br>　 // Les navigateurs mobiles prennent en charge les événements de détection de mouvement<br> fenêtre. addEventListener('devicemotion', deviceMotionHandler, false);<br>　$("#yaoyiyaoyes").show();<br>　} else{<br>　　 // Les navigateurs mobiles ne prennent pas en charge les événements de détection de mouvement<br>　　$( "#yaoyiyaono").show();<br>　} <br>}</p> <p>// Alors, comment pouvons-nous calculer si l'utilisateur secoue le téléphone ? Vous pouvez considérer les points suivants : <br>// 1. En fait, lorsque les utilisateurs secouent leur téléphone, ils le secouent toujours dans une direction <br>// 2. Lorsque les utilisateurs secouent leur téléphone, ils se déplacent dans x, il y aura ; il y aura des changements correspondants dans la vitesse dans les trois directions de y et z ; <br>// 3. Le comportement normal de mouvement du téléphone portable de l'utilisateur ne peut pas être considéré comme un tremblement (le téléphone est placé dans la poche, et l'accélération changera également lorsque marche) ). <br>// En considérant les trois points ci-dessus, calculez l'accélération dans les trois directions, mesurez-les à intervalles, examinez leur taux de changement sur une période de temps fixe et déterminez un seuil pour déclencher l'opération après agitation. </p> <p>// Tout d'abord, définissez un seuil de secousse <br>var SHAKE_THRESHOLD = 3000;<br>// Définissez une variable pour enregistrer l'heure de la dernière mise à jour <br>var last_update = 0;<br>// Tight Définissez ensuite x, y, z pour enregistrer les données des trois axes et l'heure du dernier départ <br>var x;<br>var y;<br>var z;<br>var last_x;<br>var last_y;<br>var last_z;</p> <p>//Afin de rendre cet exemple un peu plus ennuyeux et intéressant, ajoutez un compteur <br>var count = 0;</p> <p>function deviceMotionHandler(eventData) {<br>　 // Obtenez l'accélération, y compris la gravité <br> var accélération = eventData.accelerationIncludingGravity </p> <p> // Obtenez l'heure actuelle <br> var curTime = new Date().getTime(); <br> var diffTime = curTime -last_update;<br> // Période fixe <br> if (diffTime &gt ; 100) {<br>　last_update = curTime </p> <p>　 x = accélération.x; <br>　y = accélération.y <br>　z = accélération.z </p> <p> var vitesse = Math.abs(x y z - last_x - last_y - last_z) / diffTime * 10000; <p>　 if (speed > SHAKE_THRESHOLD) { <br>　　　 // TODO : Ici, vous pouvez implémenter les opérations logiques de données à effectuer après avoir secoué <br> Count ;<br>　　$("#yaoyiyaoyes") cacher (. );<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> Frère, si vous me voyez, cela signifie que vous ne pouvez pas encore le secouer, mais cela ne veut pas dire que vous n'êtes pas qualifié pour m'utiliser, mais plutôt : </br><br>.1. Si vous utilisez un navigateur PC, c'est faux. Je n'aime que les navigateurs mobiles ; </br><br> 2. Si vous utilisez un téléphone Android, je suis désolé de vous dire qu'Android est fourni avec le navigateur. m'a abandonné, vous pouvez utiliser des navigateurs tiers tels que UCWeb et Chrome ; </br><br> 3. Si vous ne tombez pas dans les deux situations ci-dessus, alors je ne peux que vous dire : vous devez changer de mobile. téléphone! ! ! </br><br></div><br><div id="yaoyiyaoyes" style="font-size:20px;margin:10px;line-height:50px;display:none;"> <br>Frère, secoue-en un, peut-être qu'il y aura une fille pure qui t'attendra !<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>