JS ---- 获取手机平衡仪（陀螺仪）角度信息

最新推荐文章于 2025-05-28 09:21:30 发布

原创最新推荐文章于 2025-05-28 09:21:30 发布 · 6.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#js #平衡仪 #陀螺仪

javascript 同时被 2 个专栏收录

6 篇文章

订阅专栏

前端

5 篇文章

订阅专栏

本文介绍 HTML5 中的 DeviceOrientation 事件及其三个主要属性 alpha、beta 和 gamma 的使用方法。通过示例代码展示了如何监听设备的方向变化，并将变化后的角度实时显示出来。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

###html5中的deviceorientation事件，此事件是检测设备方向变化时的事件。其常用属性为alpha(x)、beta(y)、gamma(z)。

alpha：左右旋转
beta：前后旋转

gamma：扭转（自转）

<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>  
</head>  
<body>  
    <div id="arrow"></div>  
</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)<br>";  
            text += "前后旋转：rotate beta{" + Math.round(event.beta) + "deg)<br>";  
            text += "扭转设备：rotate gamma{" + Math.round(event.gamma) + "deg)<br>";  
            arrow.innerHTML = text;  
        }  
    }  
    catch (e) {  
        $("#arrow").html(e.message)  
    }  
</script>