传送门：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的更多相关文章

  1. js／css 检测移动设备方向的变化 判断横竖屏幕

    js/css 检测移动设备方向的变化 判断横竖屏幕 方法一:用触发手机的横屏和竖屏之间的切换的事件 window.addEventListener("orientationchange&qu ...

  2. Swift - 判断设备方向（或监听设备方向的改变）

    通过UIDevice.currentDevice()来获取设备,可以取得设备当前的方向. 同时,我们可以添加一个通知来监听设备方向的变化,这样在开发中可以对不同的方向定制不同的排版布局界面. 下面通过 ...

  3. JS和css实现检测移动设备方向的变化并判断横竖屏幕

    这篇文章主要介绍了JS和css实现检测移动设备方向的变化并判断横竖屏幕,本文分别给出实现代码,需要的朋友可以参考下 方法一：用触发手机的横屏和竖屏之间的切换的事件  [自测可用, chrome , 手 ...

  4. H5学习系列之Geolocation API

    获取位置信息途径: 1.IP地址地理定位数据 2.GPS地理定位数据 3.WI-FI地理定位数据 4.手机地理定位数据 无废话直接上重点:navigator.geolocation对象就是获取地理位置 ...

  5. h5滑动方向、手机拖动层

    做h5时需对手指滑动方向判断及拖动浮动层,本文代码适用于手机端h5页面,pc页面可使用onMouseDown.onMouseUp.onMouseMove.(本方法仅为功能实现原理和演示,可根据自己的需 ...

  6. Swift - 使用CoreLocation获取设备方向（真实方向，磁极方向）

    CoreLocation这个定位框架除了可以获取设备的位置数据,还可以获取设备的方向(可以用来实现指南针功能等). 1,CLHeading对象通过一组属性提供航向相关数据: magneticHeadi ...

  7. Linux内核 设备树操作常用API【转】

    转自:https://www.linuxidc.com/Linux/2017-02/140818.htm 一文中介绍了设备树的语法,这里主要介绍内核中提供的操作设备树的API,这些API通常都在&qu ...

  8. java版微信公众号支付(H5调微信内置API)

    最近需要做微信公众号支付,网上找了大堆的代码,大多都只说了个原理,自己踩了太多坑,所有的坑,都会再下面的文章中标注,代码我也贴上最全的(叫我雷锋)!!! 第一步:配置支付授权目录 你需要有将你公司的微 ...

  9. Linux内核 设备树操作常用API

    Linux设备树语法详解一文中介绍了设备树的语法,这里主要介绍内核中提供的操作设备树的API,这些API通常都在"include/of.h"中声明. device_node 内核中 ...

随机推荐

  1. 微信小程序 - radio/checkbox自定义组件

    更新 2019-01-26:首次发布 2019-01-27:增加默认取值选中radio/checkbox,checkbox需在onload取值 2019-01-28:增加radio取值不存在红色提示和 ...

  2. 很好的vmware目录

    http://www.globalknowledge.com/training/course.asp?pageid=9&courseid=18023&country=United+St ...

  3. java获取cpu、内存、硬盘信息[转]

    http://m.oschina.net/blog/312911 1 下载安装sigar-1.6.4.zip 使用java自带的包获取系统数据,容易找不到包,尤其是内存信息不够准确,所以选择使用sig ...

  4. 转：初探nginx架构（一）

    来源:http://tengine.taobao.org/book/chapter_02.html 众所周知,nginx性能高,而nginx的高性能与其架构是分不开的.那么nginx究竟是怎么样的呢? ...

  5. JavaScript正则式入门

    正则式 正则表达式,又称规则表达式.(英语:Regular Expression,在代码中常简写为regex.regexp或RE),计算机科学的一个概念.正则表通常被用来检索.替换那些符合某个模式(规 ...

  6. 如何处理Android中的防缓冲区溢出技术

    [51CTO专稿]本文将具体介绍Android中的防缓冲区溢出技术的来龙去脉. 1.什么是ASLR? ASLR(Address space layout randomization)是一种针对缓冲区溢 ...

  7. ios app性能分析

    苹果app的流畅性一般比安卓的要好的多.应该是和苹果系统的设计理念同样,早期的iphone4曾经是绝对单任务,仅仅能做一件事情,尽管添加了后台能够.音乐播放,定位等有限的服务.可是大多数普通应用切换到 ...

  8. 透彻理解Ioc

    引述:IoC(控制反转:Inverse of Control)是Spring容器的内核,AOP.声明式事务等功能在此基础上开花结果.但是IoC这个重要的概念却比较晦涩隐讳,不容易让人望文生义,这不能不 ...

  9. Java之创建对象>5.Avoid creating unnecessary objects

    String s = new String("stringette"); // DON'T DO THIS! The improved version is simply the ...

  10. Knockoutjs之observable和applyBindings的使用

    observable在Knockoutjs中属于一个核心功能,在做监控数据的改变时,必须要用到Knockoutjs的监控属性——observable. ko.observable()的简单使用 首先来 ...