js 获取手机平衡仪(陀螺仪)角度信息

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u014066964/article/details/80707828

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>  
展开阅读全文

没有更多推荐了,返回首页