Comment implémenter la fonction shake via HTML5-Tutoriel H5-php.cn

Comment implémenter la fonction shake via HTML5

jacklove

Libérer： 2018-06-09 10:04:08

original

2617 Les gens l'ont consulté

Principe : Utilisez DeviceMotion pour implémenter. Pour une introduction à DeviceMotion, vous pouvez consulter
https://developer.mozilla.org/en-US/docs/. Web/Reference/Events /devicemotion

Grâce à DeviceMotionEvent, vous pouvez obtenir les attributs x, y, z de accelerationIncludingGravity et déterminer si l'appareil est secoué en fonction de les changements dans les attributs x, y, z. L'événement de secousse s'est produit.

accelerationIncludeingGravity description :
L'accélération de l'appareil inclut l'effet de la gravité et peut être la seule valeur disponible sur les appareils qui n'ont pas de gyroscope à autoriser. pour supprimer correctement la gravité des données.

Le code est le suivant :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
 <head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">    
  <title> html5使用DeviceMotionEvent实现摇一摇 </title>
  <style type="text/css">
  .center{position:absolute; width:640px; height:480px; left:50%; top:50%; margin-left:-320px; margin-top:-240px; line-height:480px; text-align:center; font-size:100px; }
  .normal{background:#000000;}
  .normal .txt{color:#FFFFFF;}
  .doing{background:#FF0000;}
  .doing .txt{color:#FFFF00;}
  </style>
 </head>
 <body id="mybody" class="normal">
    <p id="txt" class="txt center">请执行摇一摇</p>
 </body>
 <script type="text/javascript">
    var doing = 0;  // 判断是否在动画显示中
    var speed = 23; // 定义摇动的速度数值
    var lastx = 0;    var lasty = 0;    var lastz = 0;    function handleMotionEvent(event) {
        var x = event.accelerationIncludingGravity.x;        var y = event.accelerationIncludingGravity.y;        var z = event.accelerationIncludingGravity.z;        if(doing==0){            if(Math.abs(x-lastx)>speed || Math.abs(y-lasty)>speed){
                doing = 1;
                show();
            }
        }
        lastx = x;
        lasty = y;
        lastz = z;
    }    function show(){
        document.getElementById(&#39;mybody&#39;).className = &#39;doing&#39;;
        document.getElementById(&#39;txt&#39;).innerHTML = &#39;执行了摇一摇&#39;;
        setTimeout(function(){
            doing=0; 
            document.getElementById(&#39;mybody&#39;).className=&#39;normal&#39;;
            document.getElementById(&#39;txt&#39;).innerHTML = &#39;请执行摇一摇&#39;;
        },3000);
    }
    window.addEventListener("devicemotion", handleMotionEvent, true); </script></html>

Copier après la connexion

Cet article présente la fonction de secouer via html5 pour un contenu plus connexe. , veuillez suivre le site Web chinois php.

Recommandations associées :

Comment afficher et modifier l'auto_increment via MySql

Comment générer un raccourci sur le bureau Web via php Méthode

Utiliser js traversal pour obtenir des données dans le tableau

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!