html5如何获取手机陀螺仪角度信息

最新推荐文章于 2022-04-19 10:37:25 发布

Las_wang

最新推荐文章于 2022-04-19 10:37:25 发布

阅读量2.7k

点赞数 1

分类专栏： HTML JS 文章标签： html5

本文链接：https://blog.csdn.net/weixin_38576764/article/details/78316714

版权

JS 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

HTML

15 篇文章 0 订阅

订阅专栏

html5事件中，deviceorientation事件，此事件是检测设备方向变化时的事件。其常用属性为alpha(x)、beta(y)、gamma(z)。
默认将手机垂直，且正面（90度）冲着自己
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>  
    <script src="js/common/eventutil.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)<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>