Home >Web Front-end >H5 Tutorial >Detailed sample code explaining how to obtain the angle information of the mobile phone's gyroscope in HTML5

Detailed sample code explaining how to obtain the angle information of the mobile phone's gyroscope in HTML5

黄舟Original: 2017-03-20 15:18:554000browse

html5 Event , deviceorientation event, this event is an event when detecting changes in device orientation. Its commonly used attributes are alpha(x), beta(y), and gamma(z).

By default, the phone is vertical and the front (90 degrees) is facing you

alpha: rotate left and right

beta: rotate forward and backward

gamma: twist (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>

The above is the detailed content of Detailed sample code explaining how to obtain the angle information of the mobile phone's gyroscope in HTML5. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Use a feature of HTML5 - DeviceOrientation to implement the shake function on the mobile phoneNext article：Use a feature of HTML5 - DeviceOrientation to implement the shake function on the mobile phone

See more

Detailed sample code explaining how to obtain the angle information of the mobile phone's gyroscope in HTML5

Related articles