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

html5事件中，deviceorientation事件，此事件是检测设备方向变化时的事件。其常用属性为alpha(x)、beta(y)、gamma(z)。

默认将手机垂直，且正面(90度)冲着自己

alpha：左右旋转

beta：前后旋转

gamma：扭转(自转)

DeviceOrientationEvent

content="width=device-width,

initial-scale=1.0,

minimum-scale=1.0,

maximum-scale=1.0,

user-scalable=no">

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)

text += "前后旋转：rotate beta{" + Math.round(event.beta) + "deg)

text += "扭转设备：rotate gamma{" + Math.round(event.gamma) + "deg)

arrow.innerHTML = text;

}

catch (e) {

$("#arrow").html(e.message)

}

html手机陀螺儀页面,详解html5如何获取手机陀螺仪角度信息的示例代码相关推荐

html5能调用手机陀螺仪么,详解html5如何获取手机陀螺仪角度信息的示例代码
html5事件中,deviceorientation事件,此事件是检测设备方向变化时的事件.其常用属性为alpha(x).beta(y).gamma(z). 默认将手机垂直,且正面(90度)冲着自己 ...
html手机陀螺儀页面,HTML网页设置（开启重力感应/陀螺仪）
相比较"HTML网页设置",显然"开启重力感应"更有吸引力和侧重点. 这部分在基础的学习中没什么好说的,只有一个开启重力感应可以说. 窗口大小,是针对于输出Fl ...
php下载文件代码详解,php将远超文件下载到本地的示例代码详解
注:这个demo适用的是yii框架,如果您使用的不是yii框架,这个方法也适用您,简单的了解一下思路/** * 保存文件到本地 * @param 文件路径 $url * @param 保存本地路径 $ ...
马氏距离详解（数学原理、适用场景、应用示例代码）
看了很多关于马氏距离(Mahalanobis Distance)的介绍,但是总感觉有一些地方不太清晰,所以结合数学公式.机器学习中的应用案例,从头梳理一下. 马氏距离实际上是欧氏距离在多变量下的&qu ...
linux grud文件丢失,linux命令：grub 文件详解及grub修复，系统常见故障修复(示例代码)...
首先模拟grub损坏,dd if=/dev/zero of=/dev/sda count=1 bs=400 grub引导破坏,但是此时并未重启,可以直接重新安装grub,从而达到恢复grub: 第一种 ...
popstate_详解HTML5之pushstate、popstate操作history,无刷新改变当前url
一.认识window.history window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象.window对象通过history对 ...
视频教程-HTML5+CSS3项目实战详解-HTML5/CSS
HTML5+CSS3项目实战详解 13年软件开发经验,设计开发30多个大型软件,涉及政府.银行.电信.能源等大型软件项目. 精通J2EE体系架构,熟练使用Struts.Spring.hibernate ...
HTML中的camera标签,详解HTML5 使用video标签实现选择摄像头功能
详解HTML5 使用video标签实现选择摄像头功能 1. html // jquery reference // // Open WebCam Snap Photo 2. javascript El ...
html5录音怎么保存到本地,详解HTML5 录音遇到的坑
本文恩主要介绍了详解HTML5 录音的踩坑之旅,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望能帮助到大家. 说实话,一开始都没接触过 HTML5 的 Audio A ...
html5 摄像头直播,详解HTML5 使用video标签实现选择摄像头功能
详解HTML5 使用video标签实现选择摄像头功能 1. html // jquery reference // // Open WebCam Snap Photo 2. javascript El ...

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

html手机陀螺儀页面,详解html5如何获取手机陀螺仪角度信息的示例代码相关推荐

最新文章

热门文章