Rumah > Artikel > hujung hadapan web > 详解html5如何获取手机陀螺仪角度信息的示例代码
详解html5如何获取手机陀螺仪角度信息的示例代码
- 黄舟asal
- 2017-03-20 15:18:553937semak imbas
html5事件中，deviceorientation事件，此事件是检测设备方向变化时的事件。其常用属性为alpha(x)、beta(y)、gamma(z)。
默认将手机垂直，且正面（90度）冲着自己
alpha：左右旋转
beta：前后旋转
gamma：扭转（自转）
<html>
<head>
<title>DeviceOrientationEvent</title>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0,
minimum-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
<script src="js/common/jquery.min.js"></script>
<script src="js/common/eventutil.js"></script>
</head>
<body>
<p id="arrow"></p>
</body>
</html>
<script>
try {
var text = "";
window.addEventListener("deviceorientation", orientationHandler, false);
function orientationHandler(event) {
text = ""
var arrow = document.getElementById("arrow");
text += "左右旋转：rotate alpha{" + Math.round(event.alpha) + "deg)<p>";
text += "前后旋转：rotate beta{" + Math.round(event.beta) + "deg)<p>";
text += "扭转设备：rotate gamma{" + Math.round(event.gamma) + "deg)<p>";
arrow.innerHTML = text;
}
}
catch (e) {
$("#arrow").html(e.message)
}
</script>Atas ialah kandungan terperinci 详解html5如何获取手机陀螺仪角度信息的示例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：利用HTML5的一个特性- DeviceOrientation来实现手机上摇一摇功能Artikel seterusnya：详细介绍html5小游戏制作思路的代码实例