H5 IOS移动端页面获取陀螺仪的相关信息

小禅哈哈哈

已于 2023-06-16 09:53:10 修改

阅读量615

点赞数

文章标签： javascript 前端

于 2023-06-16 09:48:18 首次发布

本文链接：https://blog.csdn.net/Chan_86/article/details/131240476

版权

！！！注意：在https协议下才能获取权限

<!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>
    <button onclick="clickMe()">获取权限</button>
    <p id="z">z轴</p>
    <p id="x">x轴</p>
    <p id="y">y轴</p>
  </div>
  <script>
    var z = document.getElementById('z')
    var x = document.getElementById('x')
    var y = document.getElementById('y')

    function clickMe() {
      // DeviceOrientationEvent.requestPermission() 获取权限的，会弹出“xxx想要访问动作与方向”的确认框
      // DeviceOrientationEvent.requestPermission() 返回的是一个promise对象
      DeviceOrientationEvent.requestPermission().then(res => {
        // granted 是允许了    denied 是拒绝了
        console.log('res', res);
        if (res === 'granted') {
          console.log('允许了');
          window.addEventListener('deviceorientation', function (event) {
            // event.alpha 设备绕 z 轴旋转的角度(0 ~ 360)数字之间
            // event.beta 设备绕 x 轴旋转的角度(-180 ~ 180)数字之间
            // event.gamma 设备绕 y 轴旋转的角度(-90 ~ 90)数字之间
            z.innerText = 'z轴' + event.alpha
            x.innerText = 'x轴' + event.beta
            y.innerText = 'y轴' + event.gamma
          });
        } else {
          alert('没能获取权限，无法正常操作，请重新打开应用准许本次操作，方可正常操作')
        }
      }).catch(err => {
        console.log('err', err);
      })
    }
  </script>
</body>

</html>