详解html5如何获取手机陀螺仪角度信息的示例代码

百变鹏仔 2个月前 (10-18) #H5教程

文章标签陀螺仪

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>

文章推荐

详解html5如何获取手机陀螺仪角度信息的示例代码

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集