Heim > Artikel > Web-Frontend > So implementieren Sie die Shake-Funktion über HTML5

So implementieren Sie die Shake-Funktion über HTML5

jackloveOriginal: 2018-06-09 10:04:082625Durchsuche

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Implementierung eines HTML5-Touch-Ereignisses zur Bestimmung der GleitrichtungNächster Artikel：Implementierung eines HTML5-Touch-Ereignisses zur Bestimmung der Gleitrichtung

In Verbindung stehende Artikel

Mehr sehen