【代码】H5实现获取手机陀螺仪数据

2024-03-13 14:23:38  阅读 472 次 评论 0 条

注意:
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>



微信扫码查看本文
本文地址:https://www.yangguangdream.com/?id=2243
版权声明:本文为原创文章,版权归 编辑君 所有,欢迎分享本文,转载请保留出处!
NEXT:已经是最新一篇了

发表评论


表情

还没有留言,还不快点抢沙发?