微信H5获取陀螺仪/重力感应代码示例

DeviceOrientationEvent是获取方向，得到device静止时的绝对值； DeviceMotionEvent是获取移动速度，得到device移动时相对之前某个时间的差值比设备定位API，该API允许你收集设备的方向和移动信息。此外，该API只在具备陀螺仪功能的设备上使用。

html5, orientation

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 7594
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8" />
 <title>H5获取陀螺仪/重力感应</title>
 <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no,target-densitydpi=device-dpi" />
 <style type="text/css">
 body {
 font-size: 24px;
 }
 span {
 color: #f00;
 }
 a {
 text-decoration: none;
 color: #f00;
 }
 a:hover {
 color: #000;
 }
 </style>
</head>

<body>
 
 <h3>请用手机浏览器访问</h3>
 <h4>BARCODE: <img src="/uploads/1704/phone-accelerometer-case.png"/></h4>
 左右：0
 
 前后：0
 
 扭转：0
 
 指北针指向：0度
 指北针精度：0度
 <hr/>
 x轴加速度：0米每二次方秒
 y轴加速度：0米每二次方秒
 z轴加速度：0米每二次方秒
 <hr/>
 x轴加速度(考虑重力加速度)：0米每二次方秒
 y轴加速度(考虑重力加速度)：0米每二次方秒
 z轴加速度(考虑重力加速度)：0米每二次方秒
 <hr/>
 左右旋转速度：0度每秒
 前后旋转速度：0度每秒
 扭转速度：0度每秒
 <hr/>
 上次收到通知的间隔：0毫秒

function init() {
            if (window && window.DeviceMotionEvent)
                window.addEventListener("devicemotion", motionHandler, false);
            if (window && window.DeviceOrientationEvent)
                window.addEventListener("deviceorientation", orientationHandler, false);
        }

function orientationHandler(event) {
            document.getElementById("alpha").innerHTML = event.alpha || 0;
            document.getElementById("beta").innerHTML = event.beta || 0;
            document.getElementById("gamma").innerHTML = event.gamma || 0;
            document.getElementById("heading").innerHTML = event.webkitCompassHeading || 0;
            document.getElementById("accuracy").innerHTML = event.webkitCompassAccuracy || 0;
        }

function motionHandler(event) {
 document.getElementById("interval").innerHTML = event.interval || 0;
 var acc = event.acceleration;
 document.getElementById("x").innerHTML = acc.x || 0;
 document.getElementById("y").innerHTML = acc.y || 0;
 document.getElementById("z").innerHTML = acc.z || 0;
 var accGravity = event.accelerationIncludingGravity;
 document.getElementById("xg").innerHTML = accGravity.x || 0;
 document.getElementById("yg").innerHTML = accGravity.y || 0;
 document.getElementById("zg").innerHTML = accGravity.z || 0;
 var rotationRate = event.rotationRate;
 document.getElementById("Ralpha").innerHTML = rotationRate.alpha || 0;
 document.getElementById("Rbeta").innerHTML = rotationRate.beta || 0;
 document.getElementById("Rgamma").innerHTML = rotationRate.gamma || 0;
 }
 </script>
</body>

</html>

html5, orientation

编辑器支持Emmet

快捷键

html5, orientation

HTML5 带重力感应的404错误页面模板

HTML5/Canvas可调整重力摩擦力和弹性的蜘蛛网

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：