H5 设备方向及运动API
传送门：https://blog.csdn.net/Panda_m/article/details/57515195
入门的demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Vue -->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<style>
b { font-size: 24px; }
</style>
<body>
<div id="app">
<p>alpha(z): 手机在水平面上旋转的角度，当设备的顶部指向正北时其值为 0°。 当设备逆时针旋转时值增加。【0 -360】: <b>{{ alpha }}</b></p>
<p>beta(x): 围绕x轴上下翻转的角度，当设备的顶部和底部与地球表面等距时其值为 0。【向上翻为负值，-180 - 180】: <b>{{ beta }}</b></p>
<p>gamma(y): 围绕y轴左右翻转的角度，当设备的左侧和右侧与地球表面等距时 其值为 0。【向左翻为负值， -180 - 180】: <b>{{ gamma }}</b></p>
</div>
</body>
<script>
var vue = new Vue({
el: '#app',
data: {
alpha: "",
beta: "",
gamma: "",
},
beforeMount: function () {
window.addEventListener('deviceorientation', (orientData) => {
this.alpha = orientData.alpha || 'null';
this.beta = orientData.beta || 'null';
this.gamma = orientData.gamma || 'null';
});
}
})
</script>
</html>
展示效果：
节流版demo（强烈推荐）：
事件触发的太快，频繁的触发函数与界面渲染太浪费性能，这里我演示函数节流，参数为1000ms
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Vue -->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<style>
b { font-size: 24px; }
</style>
<body>
<div id="app">
<p>alpha(z): 手机在水平面上旋转的角度，当设备的顶部指向正北时其值为 0°。 当设备逆时针旋转时值增加。【0 -360】: <b>{{ alpha }}</b></p>
<p>beta(x): 围绕x轴上下翻转的角度，当设备的顶部和底部与地球表面等距时其值为 0。【向上翻为负值，-180 - 180】: <b>{{ beta }}</b></p>
<p>gamma(y): 围绕y轴左右翻转的角度，当设备的左侧和右侧与地球表面等距时 其值为 0。【向左翻为负值， -180 - 180】: <b>{{ gamma }}</b></p>
</div>
</body>
<script>
// 函数节流（throttle）
var throttle = function(func, wait, options) {
var timeout, context, args, result;
// 标记时间戳
var previous = 0;
// options可选属性 leading: true/false 表示第一次事件马上触发回调/等待wait时间后触发
// options可选属性 trailing: true/false 表示最后一次回调触发/最后一次回调不触发
if (!options) options = {}; var later = function() {
previous = options.leading === false ? 0 : +(new Date());
timeout = null;
result = func.apply(context, args);
if (!timeout) context = args = null;
}; var throttled = function() {
// 记录当前时间戳
var now = +(new Date());
// 如果是第一次触发且选项设置不立即执行回调
if (!previous && options.leading === false)
// 将记录的上次执行的时间戳置为当前
previous = now;
// 距离下次触发回调还需等待的时间
var remaining = wait - (now - previous);
context = this;
args = arguments; // 等待时间 <= 0或者不科学地 > wait（异常情况）
if (remaining <= 0 || remaining > wait) {
if (timeout) {
// 清除定时器
clearTimeout(timeout);
// 解除引用
timeout = null;
}
// 将记录的上次执行的时间戳置为当前
previous = now; // 触发回调
result = func.apply(context, args);
if (!timeout) context = args = null;
}
// 在定时器不存在且选项设置最后一次触发需要执行回调的情况下
// 设置定时器，间隔remaining时间后执行later
else if (!timeout && options.trailing !== false) {
timeout = setTimeout(later, remaining);
}
return result;
}; throttled.cancel = function() {
clearTimeout(timeout);
previous = 0;
timeout = context = args = null;
}; return throttled;
}; var vue = new Vue({
el: '#app',
data: {
alpha: "",
beta: "",
gamma: "",
},
methods: {
render (orientData) {
this.alpha = orientData.alpha || 'null';
this.beta = orientData.beta || 'null';
this.gamma = orientData.gamma || 'null';
}
},
beforeMount: function () {
const throttle_render = throttle(this.render, 1000);
window.addEventListener('deviceorientation', throttle_render);
}
})
</script>
</html>
展示效果：
H5 设备方向及运动API的更多相关文章
- js／css 检测移动设备方向的变化 判断横竖屏幕
js/css 检测移动设备方向的变化 判断横竖屏幕 方法一:用触发手机的横屏和竖屏之间的切换的事件 window.addEventListener("orientationchange&qu ...
- Swift - 判断设备方向（或监听设备方向的改变）
通过UIDevice.currentDevice()来获取设备,可以取得设备当前的方向. 同时,我们可以添加一个通知来监听设备方向的变化,这样在开发中可以对不同的方向定制不同的排版布局界面. 下面通过 ...
- JS和css实现检测移动设备方向的变化并判断横竖屏幕
这篇文章主要介绍了JS和css实现检测移动设备方向的变化并判断横竖屏幕,本文分别给出实现代码,需要的朋友可以参考下 方法一：用触发手机的横屏和竖屏之间的切换的事件 [自测可用, chrome , 手 ...
- H5学习系列之Geolocation API
获取位置信息途径: 1.IP地址地理定位数据 2.GPS地理定位数据 3.WI-FI地理定位数据 4.手机地理定位数据 无废话直接上重点:navigator.geolocation对象就是获取地理位置 ...
- h5滑动方向、手机拖动层
做h5时需对手指滑动方向判断及拖动浮动层,本文代码适用于手机端h5页面,pc页面可使用onMouseDown.onMouseUp.onMouseMove.(本方法仅为功能实现原理和演示,可根据自己的需 ...
- Swift - 使用CoreLocation获取设备方向（真实方向，磁极方向）
CoreLocation这个定位框架除了可以获取设备的位置数据,还可以获取设备的方向(可以用来实现指南针功能等). 1,CLHeading对象通过一组属性提供航向相关数据: magneticHeadi ...
- Linux内核 设备树操作常用API【转】
转自:https://www.linuxidc.com/Linux/2017-02/140818.htm 一文中介绍了设备树的语法,这里主要介绍内核中提供的操作设备树的API,这些API通常都在&qu ...
- java版微信公众号支付(H5调微信内置API)
最近需要做微信公众号支付,网上找了大堆的代码,大多都只说了个原理,自己踩了太多坑,所有的坑,都会再下面的文章中标注,代码我也贴上最全的(叫我雷锋)!!! 第一步:配置支付授权目录 你需要有将你公司的微 ...
- Linux内核 设备树操作常用API
Linux设备树语法详解一文中介绍了设备树的语法,这里主要介绍内核中提供的操作设备树的API,这些API通常都在"include/of.h"中声明. device_node 内核中 ...
随机推荐
- 微信小程序 - 配置普通二维码跳小程序
普通二维码跳小程序规则: https://developers.weixin.qq.com/miniprogram/introduction/qrcode.html#%E5%8A%9F%E8%83%B ...
- vSphere Replication：虚拟机的保护伞
http://server.zdnet.com.cn/server/2013/0401/2151318.shtml ZDNet至顶网服务器频道 04月01日 新闻消息: 保护IT环境的一个基本方面就是 ...
- 机器学习-分类器-级联分类器训练（Train CascadeClassifier ）
一.简介: adaboost分类器由级联分类器构成,"级联"是指最终的分类器是由几个简单分类器级联组成.在图像检测中,被检窗口依次通过每一级分类器,这样在前面几层的检测中大部分的候 ...
- Python学习笔记六：文件处理
一:打开文件 open(name,mode,[bufferSize]) name:文件路径 mode:文件打开方式 二:文件读取 read()方法:可以一次读取文件的全部内容,Python把内容读到内 ...
- java 截取字符串
java 截取字符串 CreationTime--2018年7月17日16点37分 Author:Marydon 1.去除最后一个字符 方式一:String 方式二:StringBuilder.S ...
- 〖Linux〗Ubuntu中使用KVM安装虚拟机
1. 安装软件: sudo apt-get install libvirt0 libvirt-bin libvirt-dev virt-manager qemu-system 2. 配置网桥: # i ...
- ftp相关常用命令
工欲善其事必先利其器 00.FTP常用命令 01.SFTP命令 sftp user@ip:/tmp
- Kafka流处理平台
1. Kafka简介 Kafka是最初由Linkedin公司开发,是一个分布式.支持分区的(partition).多副本的(replica),基于zookeeper协调的分布式消息系统,它的最大的特性 ...
- Ubuntu下查看软件版本及安装位置【转】
Ubuntu下查看软件版本及安装位置 查看软件版本: aptitude show xxx 也可用apt-show-versions (要先安装sudo apt-get install apt- ...
- 上海租房找房建议及条件，上海IT行业开发常见公司的位置地点
上海租房,找房条件 以2号地铁线为中心,优先选择(回家方便,重点!),交通设施较集中地铁:2,3,4 区:普陀区,静安区,长宁区,闸北区,浦东新区,闵行区,徐汇区 路:镇坪路,威宁路,娄山关路,中山公 ...