Home > Article > Web Front-end > Detailed sample code explaining how to obtain the angle information of the mobile phone's gyroscope in HTML5
html5Event , 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!