suchen

Heim  >  Artikel  >  Web-Frontend  >  Detaillierter Beispielcode, der erklärt, wie man in HTML5 Informationen zum Gyroskopwinkel eines Mobiltelefons erhält

Detaillierter Beispielcode, der erklärt, wie man in HTML5 Informationen zum Gyroskopwinkel eines Mobiltelefons erhält

黄舟
黄舟Original
2017-03-20 15:18:553968Durchsuche

html5 Ereignis , Geräteausrichtungsereignis, dieses Ereignis ist ein Ereignis bei der Erkennung von Änderungen der Geräteausrichtung. Die am häufigsten verwendeten Attribute sind Alpha(x), Beta(y) und Gamma(z).

Standardmäßig wird das Telefon vertikal gehalten, wobei die Vorderseite (90 Grad) Ihnen zugewandt ist

Alpha: nach links und rechts drehen

Beta: vorwärts und rückwärts drehen

Gamma: Drehung (Rotation) 

<html>
<head>
    <title>DeviceOrientationEvent</title>
    <meta charset="UTF-8" />
    <meta name="viewport" 
    content="width=device-width, 
    initial-scale=1.0, 
    minimum-scale=1.0, 
    maximum-scale=1.0, 
    user-scalable=no">
    <script src="js/common/jquery.min.js"></script>
    <script src="js/common/eventutil.js"></script>
</head>
<body>
    <p id="arrow"></p>
</body>
</html>


<script>
    try {
        var text = "";
        window.addEventListener("deviceorientation", orientationHandler, false);
        function orientationHandler(event) {
            text = ""
            var arrow = document.getElementById("arrow");
            text += "左右旋转：rotate alpha{" + Math.round(event.alpha) + "deg)<p>";
            text += "前后旋转：rotate beta{" + Math.round(event.beta) + "deg)<p>";
            text += "扭转设备：rotate gamma{" + Math.round(event.gamma) + "deg)<p>";
            arrow.innerHTML = text;
        }
    }
    catch (e) {
        $("#arrow").html(e.message)
    }
</script>

Das obige ist der detaillierte Inhalt vonDetaillierter Beispielcode, der erklärt, wie man in HTML5 Informationen zum Gyroskopwinkel eines Mobiltelefons erhält. 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：Verwenden Sie eine Funktion von HTML5 – DeviceOrientation, um die Shake-Funktion auf dem Mobiltelefon zu implementierenNächster Artikel：Verwenden Sie eine Funktion von HTML5 – DeviceOrientation, um die Shake-Funktion auf dem Mobiltelefon zu implementieren

In Verbindung stehende Artikel

Mehr sehen