1. 程式人生 > >js 獲取手機平衡儀(陀螺儀)角度資訊

js 獲取手機平衡儀(陀螺儀)角度資訊

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>