So implementieren Sie die Shake-Funktion über HTML5-H5-Tutorial-php.cn

So implementieren Sie die Shake-Funktion über HTML5

jacklove

Freigeben： 2018-06-09 10:04:08

Original

2636 Leute haben es durchsucht

Prinzip: Verwenden Sie DeviceMotion zur Implementierung. Eine Einführung in DeviceMotion finden Sie unter
https://developer.mozilla.org/en-US/docs/. Web/Reference/Events /devicemotion

Über DeviceMotionEvent können Sie die x-, y-, z-Attribute von accelerationInclusionGravity abrufen und anhand dessen ermitteln, ob das Gerät geschüttelt wird die Änderungen in den x-, y- und z-Attributen. Das Schüttelereignis ist aufgetreten.

accelerationIncludeingGravity-Beschreibung:
Die Beschleunigung des Geräts berücksichtigt die Auswirkung der Schwerkraft und ist möglicherweise der einzige Wert, der auf Geräten verfügbar ist, die über kein Gyroskop verfügen sie, um die Schwerkraft ordnungsgemäß aus den Daten zu entfernen.

Der Code lautet wie folgt:

<!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>

Nach dem Login kopieren

Dieser Artikel stellt die Funktion des Schüttelns durch HTML5 vor. Weitere verwandte Inhalte finden Sie hier Achten Sie auf die chinesische PHP-Website.

Verwandte Empfehlungen:

So zeigen Sie auto_increment über MySql an und ändern es

So generieren Sie eine Web-Desktop-Verknüpfung über PHP Methode

Verwenden Sie js-Traversal, um Daten in der Tabelle zu erhalten

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Shake-Funktion über HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!