html5 获取 陀螺仪,重力感应(转发)

DeviceOrientationEvent是获取方向,得到device静止时的绝对值;
    DeviceMotionEvent是获取移动速度,得到device移动时相对之前某个时间的差值比

设备定位API,该API允许你收集设备的方向和移动信息。此外,该API只在具备陀螺仪功能的设备上使用。

<html>

<head>
<title>DeviceOrientationEvent</title>
<meta charset="UTF-8" />
</head>

<body>
<p>左右:<span id="alpha">0</span>
</p>
<p>前后:<span id="beta">0</span>
</p>
<p>扭转:<span id="gamma">0</span>
</p>
<p>指北针指向:<span id="heading">0</span>度</p>
<p>指北针精度:<span id="accuracy">0</span>度</p>
<hr />
<p>x轴加速度:<span id="x">0</span>米每二次方秒</p>
<p>y轴加速度:<span id="y">0</span>米每二次方秒</p>
<p>z轴加速度:<span id="z">0</span>米每二次方秒</p>
<hr />
<p>x轴加速度(考虑重力加速度):<span id="xg">0</span>米每二次方秒</p>
<p>y轴加速度(考虑重力加速度):<span id="yg">0</span>米每二次方秒</p>
<p>z轴加速度(考虑重力加速度):<span id="zg">0</span>米每二次方秒</p>
<hr />
<p>左右旋转速度:<span id="Ralpha">0</span>度每秒</p>
<p>前后旋转速度:<span id="Rbeta">0</span>度每秒</p>
<p>扭转速度:<span id="Rgamma">0</span>度每秒</p>
<hr />
<p>上次收到通知的间隔:<span id="interval">0</span>毫秒</p>


<script type="text/javascript">
function orientationHandler(event) {
document.getElementById("alpha").innerHTML = event.alpha;
document.getElementById("beta").innerHTML = event.beta;
document.getElementById("gamma").innerHTML = event.gamma;
document.getElementById("heading").innerHTML = event.webkitCompassHeading;
document.getElementById("accuracy").innerHTML = event.webkitCompassAccuracy;

}


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

if (window.DeviceMotionEvent) {
window.addEventListener("devicemotion", motionHandler, false);
} else {
document.body.innerHTML = "What user agent u r using???";
}

if (window.DeviceOrientationEvent) {
window.addEventListener("deviceorientation", orientationHandler, false);
} else {
document.body.innerHTML = "What user agent u r using???";
};
</script>
</body>

</html>

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值