关于js陀螺仪的理解分析
检测设备方向
监听 deviceorientation
window.addEventListener("deviceorientation", handleOrientation, true);
event中包含以下几个值
| 属性 | 描述 |
|---|---|
| type | 事件的类型。 |
| bubbles | 事件是否正常起泡 |
| cancelable | 该活动是否可以取消？ |
| alpha | 设备绕Z轴的当前方向; 也就是说，设备围绕垂直于设备的线旋转多远。 |
| beta | 设备围绕X轴的当前方向; 也就是说，设备向前或向后倾斜多远。 |
| gamma | 设备绕Y轴的当前方向; 也就是说，设备向左或向右转动多远。 |
| absolute | 如果方向是作为设备坐标系和地球坐标系之间的差异提供的，则该值是该值; 如果设备无法检测到地球坐标系，则此值为false。 |
需要重点关注这四个返回值
- alpha
- beta
- gamma
- absolute
手机轴线如图：
一、理解alpha
alpha 是设备绕Z轴的方向
它的取值范围在0到360度之间。当设备顶端指向正北方向时，该属性的取值为0。
即：围绕垂直手机屏幕的轴转动
如图：
二、理解beta
beta 是设备绕X轴的方向
它的取值范围在-180到180度之间。当设备与地球表面保持平行时，该属性的取值为0。
即：围绕平行音量键的轴转动
如图：
三、理解gamma
gamma 是设备绕Y轴的方向
它的取值范围在-90到90度之间。当该设备与地球表面保持平行时，该属性的取值为0。
即：围绕平行充电口的轴转动
如图：
四、理解absolute
absolute 是用来判断是否是地球坐标系。
如果当前设备坐标系与地球坐标系相对应，则返回true，
否则返回false；
返回值为true时候，可以进行使用其他坐标系作为基准
总结
alpha => 围绕垂直手机屏幕的轴转动
beta => 围绕平行音量键的轴转动
gamma => 围绕平行充电口的轴转动absolute => 返回是否与地球坐标系相对应
示例代码：
if (window.DeviceOrientationEvent) {
window.addEventListener("deviceorientation", function(event) {
// alpha: 围绕垂直手机屏幕的轴转动的旋转角度
var rotateDegrees = event.alpha;
// gamma: 围绕平行充电口的轴转动的旋转角度
var leftToRight = event.gamma;
// beta: 围绕平行音量键的轴转动的旋转角度
var frontToBack = event.beta;
handleOrientationEvent(frontToBack, leftToRight, rotateDegrees);
}, true);
}
var handleOrientationEvent = function(frontToBack, leftToRight, rotateDegrees) {
// 弹奏一曲夏威夷吉他
};
对于浏览器兼容性方面 可以在使用时候参照MDN的说明
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。
相关推荐
-
JS event使用方法详解
event的某些属性只对特定的事件有意义.比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义. 下面的例子检查鼠标是否在链接上单击,并且,如果shift键被按下,就取消链接的跳转. <HTML> <HEAD><TITLE>Cancels Links</TITLE> <SCRIPT LANGUAGE="JScript">... function cance
-
JS事件Event元素(兼容IE,Firefox,Chorme)
好的程序往往是兼容多种浏览器的. 看下例: 一个简单的button,我们可以通过点击下面的button直接通过event对象得到当前的button元素,兼容多浏览器.当然,其他元素事件的写法同. <input type="button" id="btn" name="btn" value="button1" onclick="getEvent(event)"/>
-
Js event事件在IE、FF兼容性问题
1.window.event IE:有window.event对象 FF:没有window.event对象.可以通过给函数的参数传递event对象. 如: 复制代码 代码如下: <input type="button" onmousemove="showDiv(event);"//event不需要加引号 function showDiv(event) { var event=window.event||event; event.clientX; event.c
-
JS的Event事件对象使用方法
fasdf function bb(e){ alert(e); } var container = document.getElementById("contentq"); container.onclick=function(e){ if(document.all){//IE var a=window.event; alert(a.type); }else{ alert(e.type); } } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 事件对象获取统一的方法:(来
-
js Event对象的5种坐标
但是你懂的,浏览器实在太不和谐了,兼容性且不说,各种坐标属性看得人头昏眼花,极容易混淆.好吧,我来总结一下: 测试浏览器:IE8, Chrome13, FF8, Safari5, Opera11 先上测试用例(用HTML5的doctype测试,也可看出未来的发展趋势,其他doctype可自行测试): 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type"
-
js event事件的传递与冒泡处理
复制代码 代码如下: <div> <table nclick="gotClick(event,'table',this)" id="table"> <tr nclick="gotClick(event,'tr',this)" id="tr"> <td nclick="gotClick(event,'td',this)" id="td"> &
-
js事件(Event)知识整理
鼠标事件 鼠标移动到目标元素上的那一刻,首先触发mouseover 之后如果光标继续在元素上移动,则不断触发mousemove 如果按下鼠标上的设备(左键,右键,滚轮--),则触发mousedown 当设备弹起的时候触发mouseup 目标元素的滚动条发生移动时(滚动滚轮/拖动滚动条..)触发scroll 滚动滚轮触发mousewheel,这个要区别于scroll 鼠标移出元素的那一刻,触发mouseout 事件注册 平常我们绑定事件的时候用dom.onxxxx=function(){}的形式
-
关于js陀螺仪的理解分析
检测设备方向 监听 deviceorientation window.addEventListener("deviceorientation", handleOrientation, true); event中包含以下几个值 属性 描述 type 事件的类型. bubbles 事件是否正常起泡 cancelable 该活动是否可以取消? alpha 设备绕Z轴的当前方向; 也就是说,设备围绕垂直于设备的线旋转多远. beta 设备围绕X轴的当前方向; 也就是说,设备向前或向后倾斜多远.
-
js prototype深入理解及应用实例分析
本文实例讲述了js prototype深入理解及应用.分享给大家供大家参考,具体如下: 上一篇讲了js的prototype概念,在这里回顾一下prototype的定义: prototype是函数的一个属性,并且是函数的原型对象.引用它的必然是函数,这个应该记住. 但是,很奇怪,各位看官,你有没有看过类似下面这样引用prototype的js代码: function func(){ var args = Array.prototype.slice.call(arguments, 1); return
-
JS插入排序简单理解与实现方法分析
本文实例讲述了JS插入排序简单理解与实现方法.分享给大家供大家参考,具体如下: 在这里,我详细的讲一下我个人对于插入排序的理解. 每个人对于事物的理解都是不一样的,因为每个人对世界万物的看法和思考方式都不一样.因此,对于排序算法,我想每个人都有自己的理解方式,所以,虽然博客园里有很多关于排序的文章,但那只是其他人对这几个排序的理解方式,而笔者也有自己的理解方式,所以,笔者也就没有在意博客园写了那么多关于排序的文章而还在这里写下个人的见解了. 对于插入排序,笔者是这么理解的: 插入排序就是把一组数
-
JS常见疑难点分析之match，charAt，charCodeAt，map，search用法分析
本文实例讲述了JS常见疑难点分析之match,charAt,charCodeAt,map,search用法.分享给大家供大家参考,具体如下: JavaScript match() 方法 定义和用法 match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配. 该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置. 语法 匹配字符串,返回指定的值 stringObject.match(searchvalue) 匹配正则,返回指定
-
Python利用PyExecJS库执行JS函数的案例分析
在Web渗透流程的暴力登录场景和爬虫抓取场景中,经常会遇到一些登录表单用DES之类的加密方式来加密参数,也就是说,你不搞定这些前端加密,你的编写的脚本是不可能Login成功的.针对这个问题,现在有三种解决方式: ①看懂前端的加密流程,然后用脚本编写这些方法(或者找开源的源码),模拟这个加密的流程.缺点是:不懂JS的话,看懂的成本就比较高了: ②selenium + Chrome Headless.缺点是:因为是模拟点击,所以效率相对①.③低一些: ③使用语言调用JS引擎来执行JS函数.缺点是
-
Vue.js 应用性能优化分析+解决方案
目录 一.介绍 二.为什么我们需要 Vue JS 性能优化? 三.Vue 性能不佳背后的主要原因 1. 生成报告 2. 运行命令和npm 运行生成 四.如何优化 Vue js 应用程序的性能? 1. 在 Vue js 中懒加载 2. 基于路线的代码拆分 3.Vue js预加载组件 4. 优化第三方库 5. 使用浏览器缓存 6. 优化和压缩图像 前言: 假设我们在开发整个 Vue 应用程序方面非常努力.js.但没有优先考虑其性能:现在,我们的应用程序需要一段时间来加载.导航.提交或执行任何用户操作
-
联邦学习FedAvg中模型聚合过程的理解分析
目录 问题 聚合 1. 聚合所有客户端 2. 仅聚合被选中的客户端 3. 选择 问题 联邦学习原始论文中给出的FedAvg的算法框架为: 参数介绍: K 表示客户端的个数, B表示每一次本地更新时的数据量, E 表示本地更新的次数, η表示学习率. 首先是服务器执行以下步骤: 对每一个本地客户端来说,要做的就是更新本地参数,具体来讲: 把自己的数据集按照参数B分成若干个块,每一块大小都为B. 对每一块数据,需要进行E轮更新:算出该块数据损失的梯度,然后进行梯度下降更新,得到新的本地 w . 更新
-
前端面试之对安全防御的理解分析
目录 1.引言 2.常见前端攻击策略 3.攻击策略解释 3.1 SQL注入 3.2 XSS攻击 3.3 CSRF攻击 4.攻击防御的正确姿势 4.1 SQL注入防御 4.2 XSS防御 4.3 CSRF防御 1.引言 每逢前端面试,80%的候选人都会被问到这个问题.这问题确确实实是一道八股文.为了应付面试,我自己也是反反复复背了好几次,但是记了又忘,忘了又记,如此优雅的恶性循环让我痛下决心去搞定其中的枝枝叶叶.废话不多说,上车吧. 2.常见前端攻击策略 SQL注入 XSS攻击 CSRF攻击 3.
-
React组件的生命周期深入理解分析
目录 生命周期钩子(新) 生命周期钩子(旧) 父子组件生命周期 组件从创建到销毁的过程,被称为组件的生命周期. 在生命周期的各个阶段都有相对应的钩子函数,会在特定的时机被调用,被称为组件的生命周期钩子. 生命周期回调函数 = 生命周期钩子函数 = 生命周期函数 = 生命周期钩子 函数式组件没有生命周期,因为生命周期函数是 React.Component 类的方法实现的,函数式组件没有继承 React.Component,所以也就没有生命周期. <-- 容器!--> <div id=&qu
-
JS按位非(~)运算符与~~运算符的理解分析
那么,对于typeof var!=="number"的类型来说,进行运算时,会尝试转化成32位整形数据,如果无法转换成整形数据,就转换为NaN: JS在位运算上用了更简便的一种方法来实现这中运算,那么它的实现原理大致上可以这样理解: 复制代码 代码如下: var testData=-2.9; var testResult=(typeof testData==="number"&&!isNaN(testData)&&testData!=