526互联

H5 陀螺仪

发布时间 2023-07-30 13:14:53作者: HuangBingQuan
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="main"></div>
  <script>
    // 陀螺仪,只有带有陀螺仪的设备才支持体感
    // 苹果设备的页面只有在https的协议情况下才能使用这些接口
    /**
     * event的参数
     * alpha：指北（指南针）[0, 360) 当为0时指北。 180指南
     * beta：平放的时候beta值为0。如果将手机立起来（短边接触桌面），直立的时候beta为90.
     * gamma：平放的时候gamma值为0。如果将手机立起来（长边接触桌面），直立的时候beta为90.
     */
    window.addEventListener("deviceorientation", (e) => {
      document.getElementById("main").innerHTML = `alpha：${e.alpha}\n beta：${e.beta}\n gamma：${e.gamma}`
    })

    /**
     * 在手机中测试
     * 1. 手机和电脑在同一个局域网下
     * 2. 获取电脑的局域网ifconfig | grep "inet"
     * 3. 在手机上输入相应的ip和端口进行访问。
     */
  </script>
</body>

</html>