【代码】H5实现获取手机陀螺仪数据-应用技术-阳光梦想

注意：
1、必须要在https协议下才可以正确获取权限哦~
2、iOS端需要单独请求一个权限，要做个处理,Android则无需授权，授权也报错（

代码：

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width =device-width, initial-scale=1.0″>
    <title>获取陀螺仪</title>
</head>
<body>
    <div>
        <button onclick=”goStart()”>开始！</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 goStart() {
            let u = navigator.userAgent;
            let isIOS = u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
            if (isIOS) {
                getPermission();//iOS需要授权
            } else {
                addListener();//其他设备无需授权
            }
        }

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